CSS Background Image Transition Effects

This HTML & CSS code snippet helps to set a background image with transition effects. It uses CSS transition property to smoothly animate the background image. This lightweight project demonstrates the use of transformation of a card element with scaling and rotating animation of the background image with an easing transition duration.

You can integrate this code example for blog posts/services or product items to enhance the user experince.

How to Set Background Image with Transition Effects in CSS

In order to test the transition effects with a background image we’ll create some div elements with different background images. So, create a div element with a class name “item” and define an empty div tag with a class name “img” whose image is set through CSS background-image property. On the other hand, you can place any other HTML content inside this div that you want to display over the background image. So, the following is the basic HTML structure for the cards containing background images:

<h1>Background Image Scale and Rotate</h1>
<div class="item">
  <a href="#">
    <div class="img"></div>
    <p class="title">Shark</p>
    <p class="description">The shark sharks the sharking shark sharkingly sharkable. Shark your own shark by sharking the shark today.</p>
  </a>
</div>

<div class="item item2">
  <a href="#">
    <div class="img"></div>
    <p class="title">Shark</p>
    <p class="description">The shark sharks the sharking shark sharkingly sharkable. Shark your own shark by sharking the shark today.</p>
  </a>
</div>

Now, set the background image through CSS. The following CSS styles are optional, you can set your own styles or modify according to your needs.

.item {
  width: 400px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
  margin-bottom: 20px;
}

.img {
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  transition: all 0.7s ease;
  background-image: url("https://images.unsplash.com/photo-1560275619-4773ab57fa29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1662&q=80");
}

.item:hover .img {
  transform: scale(1.3) rotate(3deg);
  background-color: #888;
  background-blend-mode: multiply;
}

.title {
  font-family: "Amatic SC", cursive;
  font-size: 3.5em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 30%;
  left: 35%;
  z-index: 2;
  display: inline-block;
  padding: 15px 20px;
}
.title::after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.item:hover .title {
  top: 20%;
  transition: all 0.7s ease;
}
.item:hover .title::after {
  width: 100%;
  left: 0;
}

.description {
  display: none;
}

.item:hover .description {
  display: inline;
  text-align: center;
  position: absolute;
  bottom: 10%;
  left: 0;
  padding: 2% 4%;
  color: #fff;
}

.item2 .img {
  transform: scale(1.3);
}

.item2:hover .img {
  transform: scale(1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato";
  padding: 50px;
}

h1 {
  font-family: "Amatic SC", cursive;
  font-size: 50px;
  padding-bottom: 20px;
}

That’s all! hopefully, you have successfully created background image transition effects. If you have any questions or suggestions, feel free to comment below.