Cool CSS3 mouse over picture title text animation effect

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.