Simple Image Hover Effects using HTML & CSS

Simple Image Hover Effects using HTML & CSS

In this article, I have shown you how to create Simple Image Hover Effects using HTML and CSS. Earlier I shared with you many more tutorials on CSS Image Hover Effects. This type of Simple Image Hover is important for you if you are a beginner. 

Here I have shared the completed step-by-step tutorial and the required source code. First I made a box at the top of the web page in which I put the images. When you click on that image, the image will split in two from the middle. As a result, the image on the back can be seen. 

That is, two layers of the image have been used here. The first layer will move on both sides and the second layer will be visible.

Simple Image Hover Effects

This Image Hover effect is simple enough and suitable for use in any work. Here I have basically used three images. Under normal circumstances, the second and third images can be seen above. 

When you mouse over or click on the images, those two images will move to either side. And we get to see the first image at the back. Below I have given a preview that will help you to know how it works.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.



If you only want the source code, you can use the download button below the article. But here I have shared a step-by-step tutorial for you.

Step 1: Basic structure of image hover effect

I have created the basic structure of this Simple Image Hover Effects using the following HTML and CSS codes. That is, I have created a box in which the images can be seen. I have used black as the background color of the webpage here.

<div ontouchstart="" class="wrapper">

  <div class="row">

  </div>

</div>


* {
    margin: 0;
    padding: 0;
}
body{
      background: #272d2f;
}
.wrapper {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    padding: 50px 0;
}

.row {
    margin: 0 auto;
    width: 80%;
    max-width:600px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    border: 4px solid white;
}
Basic structure of image hover

Step 2: Add the necessary images

Now I have added the images. As I said I used three images. These three have used the same image. You can change the first image if you want.

<div class="effect container">
   <img src="https://user-images.githubusercontent.com/26748614/112761666-84f34c80-8ffc-11eb-9405-7621f584bbe5.jpg" class="firstImg" alt="">
   <img src="https://user-images.githubusercontent.com/26748614/112761666-84f34c80-8ffc-11eb-9405-7621f584bbe5.jpg" class="secondImg" alt="">
   <img src="https://user-images.githubusercontent.com/26748614/112761666-84f34c80-8ffc-11eb-9405-7621f584bbe5.jpg" class="thirdImg" alt="">
</div>


.row img {
    cursor: pointer;
    display: block;
    width: 100%;
}

.effect {
    position: relative;
    overflow: hidden;
}

.effect .firstImg {
    transition: transform .8s;
}

.effect:hover .firstImg {
    transform: scale(1.2)
}

Add the necessary images

Step 3: Design the second and third images

Arrangements have been made to cut the second and third images along the middle using the following CSS. The second image is placed along the left side and the third image is placed along with the right side. 

When you hover the mouse over the images, the second image will move along the left side and the third will move along the right side.

.effect .secondImg,
.effect .thirdImg {
    position: absolute;
    top: 0;
    z-index: 3;
    filter: saturate(0);
    transition: transform 1.6s;
}

.effect .secondImg {
    left: 0;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.effect .thirdImg {
    right: 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

Design the second and third images

Step 4: Add hover effect on image

Hover effects have been added to the images using the following CSS. When you click on these images, the second image will be reduced to 700 along the X-axis, that is, 700px along with the left side. As a result, we do not see the second image.

In the case of a similar third image, This will move the third image along the right side. As a result, I can't see this image. As the second and third images move, we get to see the first image.

.effect:hover .secondImg {
    transform: translateX(-700px) skewX(40deg);
}

.effect:hover .thirdImg {
    transform: translateX(700px) skewX(-40deg);
}

Add hover effect on image

Hopefully from the above tutorial, you have learned how I created these Simple Image Hover Effects. If there is any problem then you can definitely let me know by commenting. The source code for creating this CSS Simple Image Hover Effects is in the button below.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more