Image Hover Effects with Text Using CSS & HTML

Image Hover Effects with Text CSS

If you want to create image hover effects with text CSS then this tutorial is for you. image hover effects We use in image slider or image gallery. Because images with hover effects are much more interesting than ordinary images.

Image hover effects with text make the image much more perfect and modern. When you hover the mouse over the image, a text appears. With this, the image will zoom a bit. Earlier I shared tutorials on different types of image sliders, image galleries, and image hover. 

First I used blue as the background color of the webpage. Then I added an image. Under normal circumstances, the text will be hidden.

Image Hover Effects with Text CSS

Below I have given a demo of this project (image hover effects with text). Below you will find the required source code which you can copy directly.

See the Pen Pure Css - Image Hover effect by Foolish Developer (@foolishdevweb) on CodePen.

But if you are a beginner then follow the tutorials below. If you only want the source code then use the download button at the bottom of the article.

The basic structure of image hover

The basic structure of this Image Hover Effects with Text has been created using the following HTML codes. I have added an image here and used two text lines. If you want to use more, you can add it here.

<div class="container">
  <div class="image-box">

    <img src="https://image.ibb.co/cahagv/green.jpg" title="" alt="">

    <div class="text-box">
      <h1>Pure Css - Hover effect</h1>
      <p>Hamsa Sabry</p>
    </div>

  </div>
</div>

The basic design of the image has been done using the following codes. Here I have used green as the background color of the webpage. The width of the image here: 500px has been used.

body {
  margin: 0;
  padding: 0;
  background: #003444;
}

.container {
    margin: 30px auto;
    width: 500px;
}

.image-box {
    position: relative;
    overflow: hidden;
}

.image-box img {
    width: 100%;
    transition: .5s
}

The basic structure of image hover

Design the text in the image

The text has been designed using the following codes which can be seen on this image. Under normal circumstances, these texts cannot be seen. Because the text has been hidden using 'left: -100%'.

.text-box {
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: rgba(0, 52, 68, 0.5);
    transition: 0.5s
}


.text-box h1 {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 61%;
    width: 100%;
    color: #FFF;
    font-family: arial;
    transform: translateX(-50%) translateY(-50%);
}

.text-box p {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60%;
    left: 112%;
    width: 100%;
    color: #FFF;
    font-family: arial;
    transform: translateX(-50%) translateY(-50%);
}

Design the text in the image

Activate Image Hover Effects with Text

This Image Hover Effects with Text CSS has been implemented using some of the following CSS. As I said above, these texts were completely hidden using 'left: -100%'. 

When you hover the mouse over the image, it will be 'left: 0%', meaning the text will return to its previous position. This allows us to see the text in a specific place on the image.

Arrangements have been made to zoom the image twenty percent using Transform. I have used 'scale (1.2)' for that. In general, any image has a 'scale (1)'. If you want to increase the amount of image zoom then you can use any other value instead of 1.2.

.image-box:hover .text-box {
    left: 0%;
}

.image-box:hover img {
    transform: scale(1.2);
}

Image Hover Effects with Text

Hopefully from the above tutorial, you have learned how I created this Image Hover Effect using HTML and CSS. 

If you have any questions you can ask me on Instagram. Below you will find a button that contains the code needed to create this Image Hover Effects with Text CSS.






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