How to Create Image Hover Overlay Slide from Bottom to Top with HTML and CSS

[Music] hello everyone welcome to my channel today i will be showing you on how to create hover overlay image slide from bottom to top now let's get started [Music] first of all here are the file structures for today's project for the main project folder i named it as my project [Music] under the main folder here i have css folder containing the blank css file i'm also put image folder which containing the image file for this project feel free to use any images you want so the last one is the html file i named it as index.html [Music] in this step i am going to code in my index.html i'll go first into the head section let me just set the title name as tutorial next don't forget to include our css file in this section as well now i'm going to put some font styling so let's visit google font's website for this project i choose roboto and damien font style [Music] now copy the url from the selected font styles and back to html file paste the url to head section let's continue to body section in this section i'm going to create def inside the body tag and create a class called main container set the image tag and don't forget to link to the image inside the image folder the next section is overlay diff this diff will contain the title text in some sample words [Music] for the sample words i will be using from lipsum.com website i'm going to pick some of these words and copy this one now let's back to our html file and paste the words that we've taken from the previous site there you go save the project now we can see the image and all the texts that we have already put all right we're done with the html part but however it's still not over yet now let's jump into the css part i'm going to begin with body section set the margin and padding to zero for the background color feel free to use any color that you want for this project i will set it to white bluish pale color to make the color match with the image i'm using [Music] at the main container class i've set the top margin to six percent and left to 36 percent also i've set the position to relative and the width of container just 25 percent [Music] for image class i've set the display to block [Music] set the width to 100 percent fit into main container class and height as auto at the overlay class set the position to absolute set bottom left and right into zero for the background color i'll make it just black with the opacity 0.75 so it will give a transparent look to the image behind [Music] i'll set the transition to half a second ease to create such a smooth transition look when being hovered by the cursor [Music] [Music] and then the important thing we have to set the hover for the overlay's height is 100 now we're gonna set up all the text that we have put into this project to make it look properly in aesthetics in here i'm adding some basic effects to the text such as font size and styling stuff you may customize the text as you want [Music] [Music] [Music] [Music] [Music] [Music] all right i think we already done in this part now save the file and let's take a look on what we've done so far [Music] and there you have it we've completed this tutorial as you can see if i put my cursor on the top of the image the overlay layer will exactly sliding from the bottom to top perfectly and soon we'll begin slide down back again when i move the cursor away from image alright thanks for watching don't forget to leave a like comment subscribe and hit the bell to get the latest notification from us see you in the next tutorial

Channel: Code Instinct

Views: 40,131

Keywords: code instinct, html tutorial, web design, html course, online tutorials, html and css tutorial, html5, css3, hover overlay image, image hover overlay slide effects, web design tutorial, on image hover overlay slide bottom to top, pure css tutorial, web design for beginners, html and css for beginner, css hover image effects, quick tutorial, learn html and css, hover on image effects, css image hover effect, image hover text overlay, css overlay hover effects, css hover effect

Id: yfg9ChTmuKM

Length: 8min 4sec (484 seconds)

Published: Sun May 23 2021