![]() ![]() In this CSS we have added some basic styling to our block_holder and block. We added a background with an opacity of 80% to the hover_info div, used absolute positioning to place the div away from the block, and used overflow hidden on the block to ensure it doesn’t appear. We have then used the CSS transition property, which allows us to specify the elements to which we would like to apply a transition. For this element we have used all, so the transition is applied to all elements where a value is changed. We have set a duration of 200ms - this is how long all changed elements will take to transition. Finally, we have used linear as our timing function, which means our transition will have a constant speed from start to end. We then use transform to rotate the div 90 degrees. The final bit of code for this step is to set our CSS to be used on hover of the block. In this CSS we are changing the top, left and transform properties of the hover_info div on hover of the block. This will animate the div to being overlaid on top of the image. ![]() ![]() On hover, the overlaid div should rotate into place, as seen in this demo. Now that we have a base with an initial hover transition we will add content to the hover_info div, in the form of a title, paragraph and link. Aenean scelerisque odio ut dui feugiat commodo. Nulla blandit erat vel nisi consectetur ac pharetra augue consectetur. Now that we have the HTML, we will add styling to all of our elements. We have positioned the H1 25px from the top and initially 100% left to ensure that it's hidden at the start. On hover we change the left position to 0 so the H1 slides in from the left. We use the transition-delay property on hover with a setting of 200ms so it happens after the initial transition of the overlay. We have applied this on the hover class and not the initial class so it only applies when a user initially hovers over the area. When the mouse is moved off the area the delay isn’t applied and the transition happens instantly. We have positioned the paragraph 85px from the top and 10% from the left with a width of 80%. This will give the impression that the paragraph is in the centre of the block when it spans over 3 lines. We have set the opacity to 0 so it doesn’t appear initially, and set a transition on the opacity with a speed of 200ms using the linear timing function. On hover we then set the opacity to 1, which makes the text fade in. We set a delay of 600ms, which will mean that the transition will happen after the initial rotation and the slide-in of the heading. transition: right 200ms linear 700ms, color, background 200ms linear.We have styled this tag the same as the heading tag, except this time it is in the bottom right, and, again, initially it is positioned off to the right. On hover we then transition from the right with a speed of 200ms using the linear timing function, this time with a delay of 700ms. This delay means that the transition will begin halfway through the paragraph’s transition. We then have a final pair of transitions for the colour and background with the same speed and timing function but no delay. This is for when the user hovers on the tag - it will change background and text colour. ![]() In this tutorial we have used a variety of transitions, transform and transition-delays to create a chain of animations that reveal a title paragraph and link overlaid on an image.įollow the link at the top of this article to download the files and view a full working demo. Update: Thomas has created a collection of 25 different hover effects. You can see them and download the code on his website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |