What is the best way to apply a stretched-link on an image within a Bootstrap 5 Card while hovering over it?

I've implemented a bootstrap card with a stretched-link to redirect users to the content page upon clicking on the card.

However, when utilizing the stretched-link, the hoverImage fails to change accordingly.

 <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="my-image">
                        <img th:src="@{/images/a.png}" class="mainImage card-img-top" alt="...">
                        <img th:src="@{/images/a_hov.png}" class="hoverImage card-img-top" alt="...">
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Content</h5>
                        <p class="card-text">View and update the content</p>
                        <a href="https://www.example.com/content" class="card-link stretched-link"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

This is the CSS rule set I'm currently utilizing for hover effects.


.my-image .mainImage {
  display: block;
}

.my-image .hoverImage {
    display: none;
}

.my-image:hover .mainImage {
  display: none;
}

.my-image:hover .hoverImage {
  display: block;
}

I'm exploring the possibility of using JavaScript to enable the hover effect and get the stretched-link functionality to work together. Thoughts?

htmlcssbootstrap-5

Answer №1

One of the reasons for this behavior is that the .card element is completely covered by the .stretched-link::after pseudo-element. Consequently, only the .card and .stretched-link elements are able to receive the hover event.
To address this, you can simply replace .my-image:hover with .card:hover. While this will trigger the image change when hovering over any part of the card, it aligns with the semantic meaning as any part of the card serves as the link.

.my-image .mainImage {
  display: block;
}

.my-image .hoverImage {
  display: none;
}

.card:hover .mainImage {
  display: none;
}

.card:hover .hoverImage {
  display: block;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d869b869885c9c4d8c0c999">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="my-image">
          <img src="https://via.placeholder.com/500x100.png?text=Default" class="mainImage card-img-top" alt="...">
          <img src="https://via.placeholder.com/500x100.png?text=Hover" class="hoverImage card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title">Content</h5>
          <p class="card-text">View and update the content</p>
          <a href="https://www.example.com/content" class="card-link stretched-link"></a>
        </div>
      </div>
    </div>
  </div>
</div>

If you prefer the image to change only when directly hovered over, you can separate it from the stretched link. To confine the "stretch" effect to the .card-body, include .position-relative. https://getbootstrap.com/docs/5.3/helpers/stretched-link/#identifying-the-containing-block Alternatively, you could transform the div.my-image into a.my-image, although this might confuse users about the action associated with clicking the image versus the rest of the card, especially since there is no actual distinction in your case.

.my-image .mainImage {
  display: block;
}

.my-image .hoverImage {
  display: none;
}

.my-image:hover .mainImage {
  display: none;
}

.my-image:hover .hoverImage {
  display: block;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40222f2f34333432213000756e736e706d212c30282171">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <a href="https://www.example.com/content" class="my-image">
          <img src="https://via.placeholder.com/500x100.png?text=Default" class="mainImage card-img-top" alt="...">
          <img src="https://via.placeholder.com/500x100.png?text=Hover" class="hoverImage card-img-top" alt="...">
        </a>
        <div class="card-body position-relative">
          <h5 class="card-title">Content</h5>
          <p class="card-text">View and update the content</p>
          <a href="https://www.example.com/content" class="card-link stretched-link"></a>
        </div>
      </div>
    </div>
  </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

Tips for effectively redirecting traffic to another website

Is there a way to redirect someone from a page URL like example.com/2458/233 to example2.com/2458/233? The first URL contains only a file that redirects to the other domain. Can anybody provide instructions on how to achieve this process? To clarify furt ...

javascriptphphtmljson

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

csswordpresspager

Optimizing Image Size According to the Container, Not the Screen Size: A Guide

After exploring various resources on responsive images, I have come across a challenge that has me stumped. It seems like it should be simple, but I can't quite figure it out: How can I serve the appropriate image size based on container width rather ...

htmlcssimageimage-processingresponsive

How can I align those 3 divs in the center of the body?

Can someone help me with centering those 3 divs in the body? I have tried creating 2 versions of the row, one with an extra outer wrap around the column and one without. Unfortunately, since this HTML was created with a page builder (WP visual composer), I ...

htmlcss

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

javascriptjqueryhtmlcssangularjs

What is the best way to customize bootstrap styles?

Currently, I am attempting to modify basic CSS attributes within the default theme that is included with a new ASP.NET MVC 5 application in Visual Studio 2013. Specifically, my goal is to change the background color of the navigation menu. With the help o ...

asp.net-mvccsstwitter-bootstrapasp.net-mvc-5

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

htmlcssbootstrap-4

What causes the size of text to change when I zoom in my browser?

As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales. For example: p { width: 10%; height: 10%; background-color: rgb(0,0,0); top: 50%; left: 50%; position: fixed; color: rgb(255,255,25 ...

htmlcsscss-position

Align the elements of the contact form to the opposite sides

I am experiencing an issue with my contact form where all elements are flowing horizontally instead of vertically. I would like everything to be floated to the left and aligned vertically, except for the "message" box and submit button which should be on t ...

csscss-floatcontact-form

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

I am facing a similar issue as Olafvv with my angular 16 project. The problem occurs in a mat-tab-group where the :enter animations do not work when navigating away from a tab and then returning to it. However, in my case, the issue lies within a custom su ...

htmlangularanimationmat-tab

how to target the last child element using CSS commands

<a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> // This specific one is what ...

htmlcss

Copy the style of a chosen element and apply it to another element

One of the challenges I'm facing involves a dynamic span element that changes based on color selection: <span class="color checked" style="background-color: #ff0000">Red</span> In addition, I have an image element wit ...

javascripthtmlcss

Enhance your table layout with Bootstrap 3 by adjusting textarea size to fill

I am currently in the process of developing a forum and bulletin board software. I am facing some challenges while trying to integrate a reply section into the thread page. You can view what I have implemented so far here. Html: <div class="panel pane ...

jqueryhtmlcsstwitter-bootstrap

Fine-tuning the page design

I'm working on a registration page using Bootstrap-5 for the layout. Is there a way to place all elements of the second row (starting with %MP1) on the same row, including the last field that is currently on the third row? See image below: https://i. ...

htmlcssbootstrap-5

Can you provide instructions on how to insert a hyperlink onto a background image?

Is it possible to add a hyperlink to this background image without causing it to disappear? Would creating a new class in the stylesheet be the way to go? (I encountered an issue where the image disappeared when trying to call the new class). body{ back ...

htmlcss

It's a mystery unraveling the source of CSS margins and padding

Could someone please help me analyze this webpage? I am trying to make the center of the page white up to the navigation bar, at the bottom of the page, and horizontally up to the shadows on both sides. I'm not sure where this extra padding is coming ...

htmlcsstwitter-bootstrapsass

Issue with styling Icon Menu in material-ui

I'm having trouble styling the Icon Menu, even when I try using listStyle or menuStyle. I simply need to adjust the position like this: https://i.sstatic.net/n9l99.png It currently looks like this: https://i.sstatic.net/WeO1J.png Update: Here&apo ...

javascriptcssreactjsmaterial-ui

Revealing child elements by expanding the absolute div from the center

I am trying to create a rectangular mask that expands on hover to display its children with varying heights. Currently, I have achieved this using an absolutely positioned div that adjusts its left, width, and max-height properties. However, I would like i ...

htmlcssabsolute

Create a layered panel underneath a button that covers a separate element

I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...

cssreactjscss-positionfluent-uifluentui-react