Cool CSS3 mouse over picture title text animation effect

This is a use of CSS3 made mouse slide over the title text animation effect. This effect will show the mask layer when the mouse slides over the picture, and display the picture description text in a rotating way on the mask layer.

Online preview Source Download

How to useHTML Structure

The demo uses the bootstrap grid system for layout. The entire picture is placed in a .box container, which .box-content is the description text layer of the picture.

<div class= "box" >     <div class=    "box-content" >        
CSS Styles
The container is positioned relative to the width of .box the 100% 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 matte layer. The color is 60% black, the positioning method is absolute positioning, and uses the transform property to rotate it counterclockwise 90 degrees, the center point of rotation in the upper left corner position. Finally, set the transition animation for the 0.5-second ease effect for all animated 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, the initial state it rotates 180 degrees, the center point of rotation is the upper right corner. and set the 0.3-second ease-in-out effect transition animation, the animation's 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 a sub-title, the initial state it rotates 180 degrees, the center point of rotation is the upper right corner. and set the 0.3-second ease-in-out effect transition animation, the animation's 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, the initial state it rotates 180 degrees, the center point of rotation is the upper right corner. and set the 0.3-second ease-in-out effect transition animation, the animation's 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;}                
.readis read more text, the initial state it rotates 180 degrees, the center point of rotation is the upper right corner. and set the 0.3-second ease-in-out effect transition animation, the animation's 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 is over the picture, the rotation angle of all the above elements is changed to 0 degrees, because the various elements are set on the transition delay time, so each element will be rotated 0 degrees.
. 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);}                
Online preview Source Download
Join the front-end enthusiasts QQ Group (123235875) Click Add Group, Common Exchange progress!
Cool CSS3 mouse over picture title text animation effect