skip to Main Content

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.

demo

2

Answers


  1. 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:

    $(document).ready(function() {
      $(".sliderimg").addClass("loaded");
    });
    div.sliderimg {
      height: 300px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transition: 5000ms linear 1s;
      background-size: 100% auto;
      position: relative;
    }
    
    div.loaded {
      background-size: 105% auto;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <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>
    Login or Signup to reply.
  2. I’m not sure if transitions occur on document load. I would use an animation instead:

    @keyframes example {
      from {transform: scale(1, 1)}
      to {transform: scale(1.05, 1.05)}
    }
    
    div.sliderimg {
      animation-name:example;
      animation-duration:5s;
      animation-fill-mode: forwards;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search