CSS Hover Effect Not Resizing Image

Question

CSS Hover Effect Not Resizing Image

I've been struggling to incorporate a hover effect into my responsive image grid. I want the image to have a dark overlay and fade in some text when hovered over, but I can't seem to make it work.

Take a look at my HTML structure:

<div class="tile">
        <img src="some_image" class="animate">
        <div class="overlay">
        <p>Mahatma Gandhi</p>
</div>

Here's the CSS code I'm using:

.gallery .row .tile:hover ~ .tile img {
  transform: scale(1.2);
}

Despite implementing this CSS rule, the desired result is not achieved upon hovering over the image.

What could be causing the issue?

UPDATE: After some tweaking, I managed to get the hover effect working and successfully added fading text.

Check out the updated code:

<div class="tile">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
                        <div class="overlay">
                                <div class="text">Mahatma Gandhi</div>
                            </div>
                      </div>

CSS Modifications:

.tile {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.8);
}

.tile:hover .overlay {
  opacity: 1;
}

While the updated effect works, I believe it lacks a certain "feel." To enhance it, I aim to add a scaling effect to the image. Any suggestions on how I can achieve this?

html css image hover overlay

Answer 1

Answer №1

Hey there, I've put together a helpful jsFiddle link for you to check out: https://jsfiddle.net/mcs3yn1x/

Here's the HTML code:

<div class="tile">
 <img src="https://picsum.photos/200/300" class="animate">
 <div class="overlay">
 <p>Mahatma Gandhi</p>
</div>

And here's the accompanying CSS:

.tile {
  border: 2px solid black;
}

.tile:hover img {
  transform: scale(1.2);
}

Edit:

Based on your feedback, I've updated the jsFiddle link for you to take a look at: https://jsfiddle.net/f1gzonjr/4/

Updated HTML:

<div class="tile">
  <div class="container">
   <img src="https://picsum.photos/200/300" class="animate">
   <div class="overlay">
    <p>Mahatma Gandhi</p>
  </div>
</div>

Corresponding CSS:

.tile {
  position: relative;

  top: 0px;
  left: 0px;

  height: 300px;
  width: 200px;

  overflow: hidden;

  border: 2px solid black;
} 

.container:hover img{
  transform: scale(1.2);
}

.overlay{
 position: absolute;
 display: none;

 top: 0px;
 left: 0px;

 height: 100%;
 width: 100%;

 background-color: rgba(0,0,0,0.5);
}

.overlay p {
 position: relative;
 text-align: center;

 color: #fff;
}

.tile:hover .overlay{
 display: block;
}

Answer 2

Hey there, I've put together a helpful jsFiddle link for you to check out: https://jsfiddle.net/mcs3yn1x/

Here's the HTML code:

<div class="tile">
 <img src="https://picsum.photos/200/300" class="animate">
 <div class="overlay">
 <p>Mahatma Gandhi</p>
</div>

And here's the accompanying CSS:

.tile {
  border: 2px solid black;
}

.tile:hover img {
  transform: scale(1.2);
}

Edit:

Based on your feedback, I've updated the jsFiddle link for you to take a look at: https://jsfiddle.net/f1gzonjr/4/

Updated HTML:

<div class="tile">
  <div class="container">
   <img src="https://picsum.photos/200/300" class="animate">
   <div class="overlay">
    <p>Mahatma Gandhi</p>
  </div>
</div>

Corresponding CSS:

.tile {
  position: relative;

  top: 0px;
  left: 0px;

  height: 300px;
  width: 200px;

  overflow: hidden;

  border: 2px solid black;
} 

.container:hover img{
  transform: scale(1.2);
}

.overlay{
 position: absolute;
 display: none;

 top: 0px;
 left: 0px;

 height: 100%;
 width: 100%;

 background-color: rgba(0,0,0,0.5);
}

.overlay p {
 position: relative;
 text-align: center;

 color: #fff;
}

.tile:hover .overlay{
 display: block;
}

Answer 3

Answer №2

Here is an alternative approach. I'm not certain if this aligns with your specific requirements.

.image:hover img, .tile.hover img {transform: scale(1.2);}

The source of inspiration for this solution can be found here: Change background color of child div on hover of parent div?

-----UPDATE-----

To prevent distortion and maintain responsiveness, it's advisable to enclose the image within a container and set overflow to none.

HTML:

<div class="tile">
    <div class="img-wrapper"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="transition"></div>
    <div class="overlay">
    <p>Mahatma Gandhi</p>

CSS:

.img-wrapper {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
.image:hover img, .tile.hover img {
    transform: scale(1.2);
}

For a demonstration, refer to the codepen link below https://codepen.io/jamesCyrius/pen/pooqwwv

Answer 4

Here is an alternative approach. I'm not certain if this aligns with your specific requirements.

.image:hover img, .tile.hover img {transform: scale(1.2);}

The source of inspiration for this solution can be found here: Change background color of child div on hover of parent div?

-----UPDATE-----

To prevent distortion and maintain responsiveness, it's advisable to enclose the image within a container and set overflow to none.

HTML:

<div class="tile">
    <div class="img-wrapper"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="transition"></div>
    <div class="overlay">
    <p>Mahatma Gandhi</p>

CSS:

.img-wrapper {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
.image:hover img, .tile.hover img {
    transform: scale(1.2);
}

For a demonstration, refer to the codepen link below https://codepen.io/jamesCyrius/pen/pooqwwv

Answer 5

Answer №3

Take a look at this code snippet:

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 15px;
  height: 15px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

<div class="zoom"></div>

Answer 6

Take a look at this code snippet:

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 15px;
  height: 15px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

<div class="zoom"></div>

CSS Hover Effect Not Resizing Image

Answer №1

Answer №2

Answer №3

Similar questions

Making all elements the same height in rows with w3.css

Steps to fully eliminate the recent action panel from Django's administrative user interface

Center a form using Bootstrap

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Utilizing jQuery for cloning elements

Content within the Iframe is in the process of loading, followed by

Creating text with stripes using CSS

It appears that the anchors and fragment identifiers are not functioning as expected

Animate internal navigation buttons to fade in with the use of jQuery

Hidden input fields do not get populated by Angular submit prior to submission

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

Error in THREE.js: The function material.onBeforeRender is not defined

"Implement a feature that allows for infinite scrolling triggered by the height of

What is the process for loading the chosen option JSON object from an array when a button is clicked?

Cease the continuous reloading of a particular div while navigating

CSS login validator immobilized

Finding the Perfect Placement for an Element in Relation to its Companion

Can you provide guidance on how to use Javascript to submit a form specifically when the input name is labeled as "submit"?

What is the best way to modify an image in a column when I hover over a table row that was dynamically inserted using a button function?

Accessing User Input Data with JQuery