Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images.

Does anyone have any ideas, solutions, or hints to solve this issue?

Here's an example:

demo

HTML:


    <div class="container">
        <div class="row">

            <div class="col-md-4 col-sm-4">
                <a href="http://www.google.com">
                    <div class="box">
                        <img class="img-responsive" src="http://placehold.it/300x300" />
                        <div class="overbox">
                            <div class="title overtext">Client</div>
                            <div class="tagline overtext">Tag</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4 col-sm-4">
                <a href="http://www.google.com">
                    <div class="box">
                        <img class="img-responsive" src="http://placehold.it/300x300" />
                        <div class="overbox">
                            <div class="title overtext">Client</div>
                            <div class="tagline overtext">Tag</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4 col-sm-4">
                <a href="http://www.google.com">
                    <div class="box">
                        <img class="img-responsive" src="http://placehold.it/300x300" />
                        <div class="overbox">
                            <div class="title overtext">Client</div>
                            <div class="tagline overtext">Tag</div>
                        </div>
                    </div>
                </a>
            </div>

        </div>
    </div>

CSS:

.box {
    position: relative;
    cursor: pointer;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}

.box .overbox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(204, 36, 42, 0.75);
    color: #fff;
    opacity: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.box:hover .overbox {
    opacity: 1;
}

.box .title {
    font-size: 22px;
    line-height: 131%;
    font-weight: 400;
    text-align: center;
    padding-top: 95px;
}

@media (max-width: 991px) {
    .box .title {
        padding-top: 43px;
    }
}

.box .tagline {
    position: absolute;
    bottom: 0px;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    border-top: 1px solid rgb(255, 255, 255);
}

.box_client {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.box_client:hover {
    background: rgb(235, 234, 233);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}

.img-responsive {
    margin: 0 auto;
}
htmlcsstwitter-bootstrap-3image-gallerymousehover

Answer №1

When the overlay has a width:100%;, it ends up going over the gallery images if the image is smaller than its container's width.

You have two options to fix this issue. You can either set the image's width to 100%, or you can modify the .box class by removing width:100%; and adding display:inline-block; instead.

.box {
    position: relative;
    cursor: pointer;
    // width: 100%;          // remove this
    display:inline-block;    // add this
    min-height: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}

Answer №2

When dealing with a Bootstrap column that is expanding and contracting while the image remains a fixed size, it can cause sizing issues where the .responsive-image appears smaller than its parent div. Here are a couple of approaches to tackle this problem:

1) Try replacing the image in the HTML with a background-image property in CSS:

.box {
   background: url(image-url) cover no-repeat;
}

2) Adjust the image size to be 100% width:

.response-image {
    width: 100%;
}

3) Alternatively, follow Ahmed Salama's advice by removing width: 100% and adding display: inline-block;

Answer №3

The placeholder size is smaller than the parent div element, which spans the entire width of its parent due to the img-responsive class resizing the image to "max-width: 100%". You may need to use a larger image or resize it to fit the size of your parent box, although this is not generally recommended.

In this example, I have adjusted the placeholder sizes to 767px x 767px: http://codepen.io/pure180/details/OXpNxM/ HTML: 

            <div class="col-md-4 col-sm-4">
                <a href="http://www.google.com">
                    <div class="box">
                        <img class="img-responsive" src="http://placehold.it/767x767" />
                        <div class="overbox">
                            <div class="title overtext">Client</div>
                            <div class="tagline overtext">Tag</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4 col-sm-4">
                <a href="http://www.google.com">
                    <div class="box">
                        <img class="img-responsive" src="http://placehold.it/767x767" />
                        <div class="overbox">
                            <div class="title overtext">Client</div>
                            <div class="tagline overtext">Tag</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-4 col-sm-4">
                <a href="http://www.google.com">
                    <div class="box">
                        <img class="img-responsive" src="http://placehold.it/767x767" />
                        <div class="overbox">
                            <div class="title overtext">Client</div>
                            <div class="tagline overtext">Tag>
                        </div>
                    </div>
                </a>
            </div>
            
        </div>
    </div>

Answer №4

My solution to the problem was this

.container {
position: absolute;
cursor: pointer;
max-width: 400px;
min-height: 90%;
overflow: visible;
margin-left: auto;
margin-right: auto;}

Answer №5

Check out my approach: https://jsfiddle.net/5f285ask/4/

.container {
  position: relative;
  display: inline-block;
}

.container .overlay {
  background-color: rgba(204, 36, 42, 0.75);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  width: 100%;
}

.container:hover .overlay {
  opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4">
  <div class="container">
    <a href="#">
      <img alt="" src="http://placehold.it/300x300" class="img-responsive">
      <div class="overlay">
        overlay content
      </div>
    </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

Steps to center the search form in the navbar and make it expand in Bootstrap 5

I'm utilizing Bootstrap v5.1.3 and have included a navbar as shown below: navbar Here is the code for that implementation: <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light& ...

csstwitter-bootstrapnavbarbootstrap-5search-form

What is causing lxml to not remove section tags?

Having some trouble parsing HTML using lxml and Python. My goal is to eliminate section tags, but seems like lxml can remove other specified tags except for sections. For instance: test_html = '<section> <header> Test header </header& ...

pythonhtmllxml

A CSS pseudo-class similar to :empty that disregards hidden children

Are you familiar with the :empty pseudo-class? This pseudo-class targets elements that have no children at all. But is there a way to target elements that have no visible children (excluding those with display: none)? If such a pseudo-class doesn't e ...

csscss-selectorspseudo-class

Using inline JavaScript to style an element when clicked

Looking for assistance with styling a link. I've connected an external stylesheet to my HTML file, so that part is all set. The goal is to modify the text-decoration when the onclick event occurs. Here's what I currently have: <a class="dopel ...

htmlcss

The alignment of Bootstrap input fields is off center

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); <div class="row"> <div class="col-xs-12 text-center btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for creating a rounded bottom for your header

Is it possible to create a rounded header similar to this one? https://i.stack.imgur.com/aYQbA.png ...

htmlcsscss-shapes

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

javascripthtml

What is the best method to activate or deactivate a link with jQuery?

Can you provide guidance on how to toggle the activation of an anchor element using jQuery? ...

jqueryhtmlanchor

Customize Joomla Module Styles

Here in the JhotelResrvation Module area, I've identified where the module files are located. However, I'm unable to make changes to the CSS despite trying custom CSS as well. My initial plan was to add padding to the dark-transparent box using c ...

htmlcssjoomla

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

cssgoogle-chromehtmlhyperlink

Show the logo next to the user's login information

I've been grappling with this issue for quite some time now and I'm on the verge of giving up. What I'm attempting to accomplish is to have the logo display in a float-left position while also having the user welcome message displayed in fl ...

htmlcss

Unlocking two features with just a single tap

I am currently working on a website for a kiosk, where the site transitions like a photoslide between each section. To achieve this effect, I have added a layover/mask on the initial page. The layover/mask is removed using a mouse click function. This is ...

javascriptjqueryhtmlcss

Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It' ...

htmlcssalignmentcenter

What is the reason behind the removal of the "disabled" attribute when setting the "disabled" property to false?

Initially, I have a disabled button: <button disabled="disabled">Lorem ipsum</button> When using button.getAttribute('disabled'), it returns "disabled". But once the button is enabled with JavaScript: button.disabled = false; The ...

javascripthtmlformsdom

Position the div element below the navigation bar

I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this: #mapid { height: 400px; } https://i.sstatic.net/pzOdql.jpg ...

csssails.js

Retain the jQuery dropdown menu in an open state while navigating to a different webpage on the

I am encountering an issue with a drop-down menu on my website. Whenever I click on a submenu link, the new page opens but the menu automatically closes. However, I want the active menu to remain open even on the new page. To solve this problem, I believe ...

javascriptjqueryhtmlcssajax

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Sorry for the oversized images! I'm diving into media queries for the first time. When I adjust my browser window to 320px, here's how my site displays: This is what I want it to look like on mobile phones. However, when I view it on my iPhone, ...

iphonecssmobilemedia-queries

One way to showcase a single piece of data without the need for looping is by utilizing the `

I am encountering an issue. Why does the insertAdjacentHTML("afterend") output keep looping? I only want to display "1" once, not repeatedly. var btn = document.getElementById("btnClick"); btn.addEventListener("click", function (e) { e.preventDefaul ...

javascripthtmlinsertadjacenthtml

TypeScript: displaying parameters

variable_field = [["S",".","."],[".","#","."],[".",".","T"]]; <ng-template ngFor let-array [ngForOf]="field_array" let-x="index"> <ng-t ...

htmlangulartypescript

How to display an unordered list horizontally in HTML

I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...

javascriptjqueryhtmlcss