Cool CSS3 move the mouse over the image title text animation effects, cool css3

Cool CSS3 move the mouse over the image title text animation effects, cool css3

This is an animated effect that uses CSS3 to move the mouse over the title of an image. This effect shows the mask layer when the mouse slides over the image, and displays the description text of the image one by one in the form of rotation on the mask layer.

Download Online Preview source code

Method of use: HTML Structure

In the DEMO, the bootstrap grid system is used for layout. The entire image is placed in one.boxIn the container,.box-contentIs the description text layer of the image.

<div class="box">        <div class="box-content">        
CSS style
Container.boxThe positioning method is relative positioning, and the image width in it is 100% of the width of the parent container.
.box{    border: 1px solid #333;    position: relative;    overflow: hidden;}.box img{    width: 100%;    height: auto;}                
.box-contentUsed to create a mask layer. The black color is 60%, the positioning method is absolute positioning, and usetransformIt is rotated 90 degrees counter-clockwise, and the center of the rotation is located in the upper left corner. Finally, set a 0.5-second transition animation for all animation properties.
.box .box-content{    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    color: #fff;    text-align: center;    padding: 20% 20px;    background: rgba(0,0,0,0.6);    transform: rotate(-90deg);    transform-origin: left top 0;    transition: all 0.50s ease 0s;}                                  
.titleIs the title. In the initial state, it rotates 180 degrees, and the center of the rotation is the upper right corner. And set the 0.3 seconds transition-in-out effect transition animation. The animation delay time is 0.2 seconds.
.box .title{    display: inline-block;    font-size: 22px;    color: #fff;    margin: 0 0 15px 0;    position: relative;    transform: rotate(180deg);    transform-origin: right top 0;    transition: all .3s ease-in-out 0.2s;}                                  
.postIs the subtitle. In the initial state, it rotates 180 degrees, and the center of the rotation is the upper right corner. And set the 0.3 seconds transition-in-out effect transition animation. The animation delay time is 0.4 seconds.
.box .post{    display: block;    font-size: 18px;    margin-bottom: 15px;    transform: rotate(180deg);    transform-origin: right top 0;    transition: all .3s ease-in-out 0.4s;}                
.descriptionIs the description text. In the initial state, it rotates 180 degrees, and the center of the rotation is the upper right corner. And set the 0.3 seconds transition-in-out effect transition animation. The animation delay time is 0.6 seconds.
.box .description{    font-size: 15px;    margin-bottom: 20px;    padding: 0 20px;    transform: rotate(180deg);    transform-origin: right top 0;    transition: all .3s ease-in-out 0.6s;}                
.readIt is the Read More text. In the initial state, it rotates 180 degrees, and the center of the rotation is the upper right corner. And set the 0.3 seconds transition-in-out effect transition animation. The animation delay time is 0.8 seconds.
.box .read{    font-size: 20px;    font-weight: bold;    color: #fff;    display: block;    letter-spacing:2px;    text-transform: uppercase;    transform: rotate(180deg);    transform-origin: right top 0;    transition: all 0.3s ease-in-out 0.8s;}                
When the mouse slides over the image, the rotation angle of all the above elements is changed to 0 degrees, because the transition delay time is set for each element, therefore, each element is rotated at a zero degree.
.box .read:hover{    color: #e8802e;    text-decoration: none;}.box:hover .box-content,.box:hover .title,.box:hover .post,.box:hover .description,.box:hover .read {    transform:rotate(0deg);}                
 
Download Online Preview source code
Join the QQ group of front-end enthusiasts (123235875) and click Add group to share progress!