Tips for achieving a full div image on hover

I'm having trouble with my CSS code for an image hover effect in a div. The image is appearing larger than the div and leaking out of it. How can I make sure the image stays contained within the div?

Here's the updated CSS code:

img {
  display: none;
  max-height: 50vh;
}
.effect:hover .text {
  display: none;
}
.effect:hover img {
  display: block;
}

And here's the corrected HTML code:


    <div class="row">
      <div class="col-lg-3 alternate_2 effect">
        <h1 class="display-6 text">Studio Griot</h1>
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
        <a href="#">
          <img src="images/Shalaj.JPG"/>
        </a>
      </div>
      <!-- additional columns go here -->
    </div>

Thank you for your assistance!

htmlcss

Answer №1

Corrected version based on OP's request.

Below is the optimized image display code that ensures full width and height without distortion using object-fit: cover

Learn more about object-fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.effect:hover .text {
  display: none;
}

.effect:hover img {
  display: block;
}

h1.text {
  font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Studio Griot</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Web Development</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Data Visualisation</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Incrediminds</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
</div>

Make sure to add width: 100% to the img tag for it to maintain 100% width of its parent container. Bootstrap markup has been modified to use col-sm.

Additional details for future readers:

An img element will default to showing at its original size unless width: 100% is specified and set to display: block, as images are inline by nature.

img {
  display: none;
  width: 100%;
}

.effect:hover .text {
  display: none;
}

.effect:hover img {
  display: block;
}

h1.text {
  font-size: 14px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Studio Griot</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Web Development</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Data Visualisation</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Incrediminds</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a jQuery plugin for input file validation

This code is functioning properly, however the file field is not being validated. All input fields are successfully validated by this plugin except for the file type field. I believe there may be something missing in my implementation, so please help me de ...

phpjqueryhtml

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

I'm still getting the hang of ReactJS, and I've been facing some challenges with making React components responsive. For my app, I am utilizing react-tabs. It works well when the screen is wide, but I need to switch to a hamburger panel layout w ...

cssreactjsresponsive-design

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

htmlcssmedia-queries

Is it possible to instruct Vue to prioritize the inherited class over others?

I have a situation in my component where I need Vue to disregard the existing class and instead use the inherited class, but only if it is of the same type as the inherited class. Let me illustrate with an example: Consider a button component like this M ...

htmlcssvue.jsvuejs3tailwind-css

limiting jquery selector to target only the td elements within a table

I have a table generated by asp.net that functions as a slide show. To make the slide show work properly, I need to select only the root td elements of the table. This becomes an issue when the table has multiple rows. The jquery cycle plugin is being used ...

jqueryasp.nethtml

Is it feasible to generate emojis using a gulp Icon-font task?

I'm in the process of creating a script that can generate fonts from SVG images, and so far it's been successful (using similar code to what's provided on https://www.npmjs.com/package/gulp-iconfont) Now I have a more specific question - is ...

cssnode.jshtmlgulpicon-fonts

How can I keep a button element in place when resizing the window using CSS?

I'm currently experiencing an issue with my navbar where a button escapes from it when I resize the screen. Which CSS property should I modify to ensure that the button remains inside the navbar and doesn't escape? Here is a JFiddle link demonst ...

css

The click() function in jQuery executing only once inside a "for" loop

This is an example of my HTML code: <!DOCTYPE html> <head> <title>Chemist</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h2 id="money"></h2> <table border="1px ...

javascriptjqueryhtml

Obtain the computed style by utilizing setTimeout for effective functionality

I want to retrieve the calculated style (background-color) of a span element. Here's my HTML code, consisting of two label elements, each containing an input and a span: <label> <input type="radio" name="numbers" value="01" checked/> ...

javascripthtmlcss

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

cssreactjssemantic-uisemantic-ui-react

Unable to retrieve the chosen option from the datalist

I am encountering an issue with a datalist where I can't seem to retrieve the value that is currently selected when a button is clicked. Despite following recommendations from various posts on Stack Overflow, my code still returns undefined. Interesti ...

javascriptjqueryhtmlreactjs

As soon as I hover over my icon to enlarge it, I notice that my entire page starts to

Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code: <div className="bg- ...

htmlcssreactjsreact-nativesass

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

javascripthtmlcss

Teaching jQuery selectors to detect recently-added HTML elements

Unable to find a solution in the jQuery documentation, I am seeking help here for my specific issue. Embracing the DRY principle, I aim to utilize JavaScript to include a character countdown helper to any textarea element with maxlength and aria-described ...

javascripthtmljquerydom

Subdomain Dilemma: Trouble with Images in Internet Explorer

Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...

htmlcssimageinternet-explorercross-browser

Setting boundaries for <td> widths: min-width and max-width

Similar Question: Min-width and max-height for table atrributes The <tables> and <td> elements do not recognize the percentage-based attributes min-width or max-width as per specification. How can this be simulated? ...

htmlcss

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

javascripthtmlcss

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

javascripthtmlcss

Achieving the grid-column property as you navigate deeper into the tree

Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this: .grid { display: grid; grid-template-columns: repeat(3, 1 ...

htmlcsscss-grid

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

phpjavascripthtml