Display and conceal image overlay with hover effect in Bootstrap 4.2

Currently implementing Bootstrap 4.2.. What is the recommended approach for displaying and concealing an Image overlay with a seamless transition?

The structure of my HTML will be:

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Can this be achieved using Display properties? In order to utilize responsive classes, excluding the hover effect on mobile devices.

Additionally, I'm unable to locate the opacity class in Bootstrap 4.2. anymore?

htmlcssbootstrap-4opacity

Answer №1

If you're looking for a smooth way to show and hide an image overlay in your code using simple CSS and HTML, then I have the perfect solution for you.

.overlay-container {
  position: relative;
  width: 300px;
}
.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: #008CBA;
  color: #fff;
}
.overlay-container:hover .overlay {  
  opacity: 1;
}  .content{
  position: absolute;
  top: 10%;
  left: 20%; 
  -webkit-transform: translate(-10%, -10%);
  -ms-transform: translate(-10%, -10%);
  transform: translate(-10%, -10%);
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
 <div class="overlay-container"> <div class="card bg-dark text-white">
  <img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="image" alt="...">
  <div class="overlay"> <div class="content">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </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

Incorporating Bootstrap 4 into your Grails project

Currently utilizing Grails for a web project as part of my CSE course in college. Interestingly, most other groups working on this project have opted for Bootstrap 4 for web design (my group is the only one using Grails). After exploring Bootstrap 4, I am ...

twitter-bootstrapgrailsbootstrap-4

Displaying identical images in both the Carousel Card and Modal

I recently designed two separate modals, each containing different elements. However, I encountered an issue where both modals display the same photo even though they have different src values. How can I troubleshoot this problem? Despite updating all of ...

htmlimagecarouselbootstrap-5card

Creating a personalized CSS class for TYPO3 menu links

I am currently in the process of creating a brand new website using TYPO3 6.2 and incorporating the Bootstrap Package. My goal is to be able to assign custom CSS classes to menu links directly from the backend, and then display these CSS classes within my ...

csstypo3typoscriptfluidextbase

Potential reasons for the malfunction of the bootstrap 5 navbar dropdown

After copying the code for the navbar dropdown from Bootstrap 5 documentation, the dropdown feature is not functional. Clicking on the dropdown does not display the links ("action", "another action", "something else"). What steps should I take to troublesh ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Tips for flipping the content of an accordion button in Bootstrap 5

Looking for help with customizing an accordion button on a website with Arabic content. The issue is that I need to reverse the content within the accordion-button (the question on the right, and the down arrow on the left). Any suggestions on how to sol ...

htmlcssalignmentarabicbootstrap-5

Combining three input files in a single form and securely storing them in the database

After trying several solutions on Stack Overflow, I haven't found any that helped me or addressed the issue at hand. I have a form with three input fields, and while I know I can use the 'multiple' attribute on one field, I specifically nee ...

phphtmlmysql

Child element's CSS is failing to apply, while the parent element's styling is functioning correctly

I have developed a small quiz application where, after answering questions, I display a progress bar. The issue I am facing is with the styling of the progress bar. I have set up two div elements for this purpose - one as the parent element (id = "progress ...

htmlcss

Invoke Web Communication Foundation service using JavaScript on an HTML webpage

I am working on a WCF project in VSStudio2012 and I need to execute a method from a JavaScript function. Here is the JavaScript file: var url = 'http://localhost:52768/Service1.svc/' function test() { var response; $.ajax({ type: 'P ...

c#javascriptjqueryhtmlwcf

Parsing CSS with PHP

Having an issue with my CSS link for images and need some assistance: background-image:url(images/background.gif); I'm looking to adjust the directory by adding ../. The code I aim to modify is as follows: background-image:url(../images/background. ...

phpcssparsing

Influence the behavior of surrounding elements as we move our cursor over them

I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...

javascriptjqueryhtmlcsshover

A guide on integrating functions into dynamically created buttons using the DOM

Is there a way to add functionality to the button labeled "CLICK ME TO EDIT"? I'm looking for some ideas on how to do this. var comment = prompt("Type content for new paragraph here", ""); var newParagraph = document.createElement('p'); new ...

javascripthtml

How to verify the parent nodes in a jstree

I have implemented a two state jstree. However, I am encountering an issue where it is not possible to select any other node in relation to a node. My goal is that when I click on a specific node, all of its parent nodes should also be checked. Any assist ...

javascriptjqueryhtmlcssjstree

Exploring the depths of CakePHP 3's debug_kit in a subdirectory

After developing locally, I transferred everything to the server. The functionality is working fine, but I am having issues with the debugkit not displaying correctly. I am unable to access the js, css files, etc. All I see is an empty box with a placehol ...

phpcsscakephp-3.x

I am dynamically generating table rows and populating them with data. However, I encountered an issue with retrieving the data by their respective IDs

Creating a table row dynamically by populating it with data. However, encountering an issue with retrieving the data by their respective id. if(xmlhttp.status == 200) { var adminList = xmlhttp.responseJ ...

javascriptjqueryhtmlajaxweb

The browser fails to display the canvas when using the fillRect function

As a novice in Canvas, I've been experimenting with some code, but unfortunately, it's not working for me. Here's the code I used. Can someone help me identify the issue? <!DOCTYPE html> <html> <head> <title> 28 ...

javascriptcsshtmlcanvashtml5-canvas

Different ways to prevent invalid entries in an input field with type datetime-local

<input type="datetime-local" step="1"> Is there a way to prevent invalid date input? For example, entering a date like "11:11:1111" in the format "mm-dd-yyyy". How can this be addressed using Moment.js? ...

htmlangularmomentjsdatetime-formatangular-moment

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

Unable to retrieve the "value" attribute from the DOM element of the plus/minus box

Looking to retrieve the "value" attribute from the selection box that allows users to choose the quantity of a specific item on my website. As a beginner in both Javascript and HTML, I noticed the attribute when inspecting the element: <input size="2" ...

javascriptjqueryhtmldomgoogle-tag-manager

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

cssangularmaterial-uiangular-materialmat-datepicker

Update the content of the widget

Currently, I am utilizing the following script to display NBA standings: <script type="text/javascript" src="https://widgets.sports-reference.com/wg.fcgi?script=bbr_standings&amp;params=bbr_standings_conf:E,bbr_standings_css:1&amp"></sc ...

javascripthtmlcsswidget