I have an image like this:
div.sliderimg {
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: transform 5000ms linear 0s;
transform: scale(1.05, 1.05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sliderimg" style="background-image: url('http://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=800&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400')">
<div class="carousel-caption">
<small>FEATURED ARTICLE</small>
</div>
</div>
but it couldn’t run. can please help me.
2
Answers
Since you linked jQuery to your document, then you can use it to add a class onload.
transition
CSS will do its job from here.I suggest to use background-size instead transform:
I’m not sure if transitions occur on document load. I would use an animation instead: