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 StylesThe 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-content
Used 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;}
.title
is 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;}
.post
is 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;}
.description
Is 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;}
.read
is 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