simultaneous image hover effect for all images

I am experiencing an issue with my CSS and Bootstrap hover effect. The overlay tags are enclosed within a div class, but they all hover simultaneously. Each overlay belongs to a different Bootstrap grid, yet the effect extends even to the empty spaces between the photos. Any assistance on how to resolve this would be greatly appreciated. Thank you.

https://i.sstatic.net/xAKsX.png https://i.sstatic.net/niSW8.png

HTML:

<div class="container">
  <div class="row">
      <div class="col-md-12 text-align-center">
        <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=beauty">
          <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
          <div class="overlay">
            <div class="overlay-content">
              <img src="img/icon-beauty-white.png" class="img-responsive center-block">
              <div class="spacer overlay-text">BEAUTY</div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=health">
          <img class="img-responsive" src="img/_stock_mwc_health.jpg">
          <div class="overlay">
            <div class="overlay-content">
              <img src="img/icon-health-white.png" class="img-responsive center-block">
              <div class="spacer overlay-text">HEALTH</div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-xs-12">
        <a href="cards/list.php?tn=wellness">
          <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
          <div class="overlay">
            <div class="overlay-content">
              <img src="img/icon-wellness-white.png" class="img-responsive center-block">
              <div class="spacer overlay-text">WELLNESS</div>
            </div>
          </div>
        </a>
      </div>
  </div>
</div>

CSS:

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f08300;
}

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

.overlay-content {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.spacer {
    margin: 20px 0px 20px 0px;
}

For further information, here is the link to my JSFiddle where I have added placeholder images: http://jsfiddle.net/cnkgqhdw/1/

htmlcsstwitter-bootstrap

Answer №1

Instead of applying the hover effect to the container, try targeting the columns directly! Just modify .container:hover to .col-md-4:hover.

To maintain proper spacing, you can leverage Bootstrap's built-in spacing system. For your scenario, you can create a default margin by adding the class mx-3 to the overlay element.

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: #f3a64c;
}

.col-md-4:hover .overlay {
  opacity: 1;
}

.overlay-content {
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.exact-center {
  text-align: center;
  vertical-align: middle;
}

.spacer {
  margin: 20px 0px 20px 0px;
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="col-md-12 text-align-center">
      <h2 class="bold_font">BROWSE OUR CARDS</h2><br>
    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
      <div class="overlay mx-3">
        <div class="overlay-content">
          <img src="img/icon-beauty-white.png" class="img-responsive center-block">
          <div class="spacer overlay-text">BEAUTY</div>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_health.jpg">
      <div class="overlay mx-3">
        <div class="overlay-content">
          <img src="img/icon-health-white.png" class="img-responsive center-block">
          <div class="spacer overlay-text">HEALTH</div>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-xs-12">
      <img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
      <div class="overlay mx-3">
        <div class="overlay-content px-3">
          <img src="img/icon-wellness-white.png" class="img-responsive center-block">
          <div class="spacer overlay-text">WELLNESS</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

The current configuration is set to activate the :hover on the .container element, representing the entire row. To make it work properly, include a class for your card and apply .card:hover

Answer №3

When you hover over the entire container, every element within it will also receive the hover effect.

To avoid this, it is recommended to assign a specific class to the:

<a class="item" href="">

and then apply the hover effect to that class:

.item:hover {
  //add your styling here
}

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

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

jqueryhtmlcssscrollnav

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

javajavascripthtmlajax

Leverage the power of JavaScript validation combined with jQuery

Hello, I'm relatively new to the world of Javascript and jQuery. My goal is to create a suggestion box that opens when a user clicks on a specific button or div element. This box should only be visible to logged-in users. I have some knowledge on how ...

javascriptc#jqueryhtmlasp.net

What is the reason for adding CSS styles to a JavaScript file without importing them?

/Navbar.js/ import './navbar.scss'; import {FaBars, FaSearch} from "react-icons/fa"; import { useState } from 'react'; function Navbar(){ const [hide,sethide] = useState(true); const barIcon = document.querySelectorAl ...

javascripthtmlcssreactjs

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen

What is the process of incorporating HTML into a jQuery program in order to immerse the world in an element?

I am looking to utilize HTML with the value in a checkbox, After adding a shortcode: <label class="HCheck">(this is val 1 )</label> and incorporating jQuery to change it to: <label class="HCheck">(this is val 1 ) ...

javascripthtmljqueryloopsdom

PersistJS callback function is malfunctioning

I stumbled upon a great library for managing client storage. You can find the latest version here: https://github.com/jeremydurham/persist-js However, I encountered an issue with the callback function. var result = store.get('saved_data', func ...

javascripthtmlpersistjs

Creating a sleek navigation menu using Bootstrap 4

Currently tackling the Vertical Navigation bar which can be found at this location: Codeply This is my code snippet: <html> <body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > ...

cssbootstrap-4

Choosing a request date that falls within a specified range of dates in PHP Laravel

In my database, I currently store two dates: depart_date and return_date. When a user is filling out a form on the view blade, they need to select an accident_date that falls between depart_date and return_date. Therefore, before submitting the form, it ne ...

javascriptphphtmlmysqllaravel

Embedding a thread in an HTML document (Difficult task)

I'm currently working on a method to achieve the following task: Embedding a specific string (such as "TEST") into the content of an HTML page, after every certain number of words (let's say 10). The challenge here is ensuring that the word count ...

javascriptjqueryhtml

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

PHP MySQL outputting data in a dropdown menu format

Struggling to extract data from a database and display it as a dropdown list. I am fetching the foreign key, its unique code, and its name/title to be displayed in a dropdown list for input into a new table. $sql = "SELECT quali_code, title FROM ...

phpmysqlhtml

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

javascripthtml

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

css

Rotating Images in Query and Chrome

My script for rotating images is functioning well in various browsers, however, it seems to be experiencing issues specifically with Google Chrome. In order to address this problem, I attempted a CSS3 workaround. Unfortunately, I have encountered difficul ...

jqueryimagecssrotation

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

asp.nethtmlcss

Enable vertical scrolling on the second row of a table while keeping the first row fixed as the table header (CSS)

While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scr ...

javascripthtmlcssace-editor

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

htmlcss

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

cssvue.jstailwind-css

`When a link is clicked, show one div overlapping another.`

Is it possible to have one div display over another when a link is clicked? Here is the HTML and CSS code: <div id="desc" class="desc">some text</div> <div id="awards" class="awards">some other text</div> <a href="#">click< ...

jqueryhtmlcss