Simple CSS3 hover over image title and mask layer animation effects, css3 mask

Simple CSS3 hover over image title and mask layer animation effects, css3 mask

This is a simple animation effect that uses CSS3 to move the mouse over the image title and mask layer. This mouse slide effect uses CSS3transitions and transform attributes to create a mask layer and image title animation when the mouse slides over an image.

Download Online Preview source code

Method of use: HTML Structure

The HTML structure of the image effect with the mouse sliding over is very simple: Use<div>An element is used as the Image Mask Layer and contains the description of the image.

12345678

<img src="img/01.jpg" alt=""><div class="caption">  <div class="blur"></div>  <div class="caption-text">    <h1> Image title </h1>    <p> Description </p>  </div></div>

CSS style

The first DEMO uses the transparency opacity attribute to create the import effect of the mask layer.transitionTo create a smooth transition animation.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

.caption-style-1 li{  float: left;  padding: 0px;  position: relative;  overflow: hidden;} .caption-style-1 li:hover .caption{  opacity: 1; }.caption-style-1 img{  margin: 0px;  padding: 0px;  float: left;  z-index: 4;}.caption-style-1 .caption{  cursor: pointer;  position: absolute;  opacity: 0;  -webkit-transition:all 0.45s ease-in-out;  -moz-transition:all 0.45s ease-in-out;  -o-transition:all 0.45s ease-in-out;  -ms-transition:all 0.45s ease-in-out;  transition:all 0.45s ease-in-out; }.caption-style-1 .blur{  background-color: rgba(0,0,0,0.65);  height: 300px;  width: 400px;  z-index: 5;  position: absolute;} .caption-style-1 .caption-text h1{  text-transform: uppercase;  font-size: 24px;}.caption-style-1 .caption-text{  z-index: 10;  color: #fff;  position: absolute;  width: 400px;  height: 300px;  text-align: center;  top:100px;}

Other effects can be easily created. For more information, see the downloaded source file.

Download Online Preview source code

Engaged in front-end addition: 1652703422, sharing progress!