Developing a sleek hover effect with overlaid text on top of an image

I am currently working on a website using Bootstrap 4. One of the features I have implemented is a set of thumbnail images with text overlays that change color when hovered over. However, the hover effect disappears when hovering over the text. Any suggestions on how to maintain the effect even when the text overlay is hovered over?

Below is the HTML code:

<div class="row learn_more">
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/work/index.html" class="learn_more-link">
            <div class="learn_more-hover">
            </div>
            <img src="img/work.png" class="img-fluid" alt="work">
            <div class="learn_more-text">
                <p>Work</p>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6 learn_more-item">
        <a href="/about/index.html" class="learn_more-link">
            <div class="learn_more-hover">
            </div>
            <img src="img/about.png" class="img-fluid" alt="about">
            <div class="learn_more-text">
                <p>About</p>
            </div>
        </a>
    </div>
</div>

This is the CSS for the design:

.learn_more-link {
    display: block;
    position: relative;
}

.learn_more-hover {
    background: rgba(221, 33, 99, 0.75);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.learn_more-hover:hover {
    opacity: 1;
}

.learn_more * {
    z-index: 2;
}

.learn_more img {
    opacity: 0.25;
}

.learn_more-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
}

UPDATE:

After taking your advice into consideration, I made some changes to the code.

Here is the updated HTML:

<div class="row learn_more">>
    <div class="col-md-3 col-6 learn_more-item"/>
    
         <a href="/work/index.html" class="learn_more-link"/>
             <img src="img/work.png" class="img-fluid" alt="work"/><span class="learn_more-text">Work</span>
          </a>
     </div>

      <div class="col-md-3 col-6 learn_more-item"/>
         <a href="/about/index.html" class="learn_more-link"/>
              <img src="img/about.png" class="img-fluid" alt="about"/><span class="learn_more-text">About</span>
          </a>
      </div>
 </div>

And here is the updated CSS:

.learn_more-link {
    display: block;
    position: relative;
}

.learn_more-link:hover {
    background: rgba(221, 33, 99, 0.75);
}

.learn_more img {
    opacity: 0.25;
}

.learn_more-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
}
htmlcsstwitter-bootstraphoverbootstrap-4

Answer №1

Edited for Clarity

HTML

<div class="row explore_more">
    <div class="col-md-3 col-6 explore_more-item">
        <a href="/explore/index.html" class="explore_more-link">
            <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" class="img-fluid" alt="explore">
            <div class="explore_more-text">
                <p>Explore</p>
            </div>
        </a>
    </div>
</div>

CSS

.explore_more-link {
    display: block;
    position: relative;
}

.explore_more-item:hover{
  background-color: rgba(221, 33, 99, 0.75);
}

.explore_more img {
    opacity: 0.25;
}

.explore_more-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
}

Give this a try and customize the styling accordingly

I hope this suggestion proves helpful.

Answer №2

Reorganized the div blocks and removed some unnecessary HTML codes.

<div class="row learn_more">

<div class="col-md-3 col-6 learn_more-item">

    <a href="/work/index.html" class="learn_more-link">
        <img src="img/work.png" class="img-fluid" alt="work"><span>Work</span>

    </a>

</div>

<div class="col-md-3 col-6 learn_more-item">

    <a href="/about/index.html" class="learn_more-link">

        <img src="img/about.png" class="img-fluid" alt="about"><span>About</span>

    </a>

</div>


.learn_more-link 
{
    display: block;
    position: relative;
}

.learn_more-link:hover 
{
    background: rgba(221, 33, 99, 0.75);
}


.learn_more img 
{
    opacity: 0.25;
}

span
{
    font-size:20px;
    margin-left:30px;
}

My efforts to make it more readable should be beneficial for you..

Answer №3

Have you attempted to add a hover effect to

.discover-more{/*add your code here*/}

Answer №4

Give this a shot

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(75,75,75,0.7);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(186, 0, 34, 0.52);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  margin:0px;
}

.hovereffect p.text {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 7px;
}

.hovereffect:hover p.text {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect p.text:hover {
  box-shadow: 0 0 5px #fff;
}
<div class="container">
    <h1>Hover Effect</h1>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="hovereffect">
            <img class="img-responsive" src="http://cableandmedia.com/abranew/img/banner/3.jpg" alt="">
            <div class="overlay">
               <h2>Your Title</h2>
               <p class="text">Your dummy text
               <a href="#">read more</a></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

Troubleshooting IE8 Problem with CSS Table Cell

Wondering if this is an easy fix :) I have a website with the following CSS styles: .gameboard-table { border: solid 3px black; padding: 0px; border-collapse: collapse; } .gameboard-table tr { padding: 0px; margin: 0px; } .gameboard- ...

cssinternet-explorer-8css-tables

The CSS animation initially encounters a glitch before ultimately running smoothly as planned

I am currently working on a basic webpage that will showcase a list of disciplines. When a discipline is selected, relevant information will be displayed below. The code snippet available here demonstrates the functionality I am aiming for. However, I hav ...

htmlcsscss-animationskeyframe

Attempting to create a CSS header that spans the entire width of the browser

For my website, I want to create a header that spans the entire width of the browser. Currently, all my content is contained within a wrapper div with a set width of 990px. The header should have a fixed position as well. However, when I try to adjust th ...

htmlcssresponsive-designpositionwidth

Strange behavior of focus()

My objective is to launch a popup containing an input field and automatically bring focus to that input. I have attempted using $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but unfortunately, ...

javascriptjqueryhtmlsetfocusautofocus

Pattern matching to locate text that is not enclosed within HTML tags and does not fall within certain specified tags

I am attempting to create a regular expression that will match specific words located outside and between HTML tags (but not within the tags themselves). However, I also need to ensure that these words are excluded when they appear between heading tags suc ...

phphtmlregex

Scrolling Bootstrap tabs

Here is the code snippet provided below: JavaScript: var hidWidth; var scrollBarWidths = 40; var widthOfList = function(){ var itemsWidth = 0; $('.list li').each(function(){ var itemWidth = $(this).outerWidth(); itemsWi ...

jqueryhtmlcsstwitter-bootstrap

What strategies can I use to ensure consistent website layout across various zoom levels and browsers?

As a newcomer to web design, I am excited that my site is almost ready to go live. However, I have encountered some significant issues right before launch. When the site is zoomed in or out, the content becomes misaligned at certain zoom percentages. Add ...

htmlcsslayout

Generating a multiplication grid using PHP

I'm currently facing a challenge regarding the presence of an additional "0" box on my multiplication table. Below is the code that I have been working with: $cols = 10; $rows = 10; $number = 0; $number2 = 0; echo "<table border=\"1\"> ...

phphtml

Dynamic Autocomplete Text Input featuring API-supplied Array in Angular

Currently, I am exploring the process of populating a text box with user emails obtained through an API call to the server. select-users.component.html: <input type="text" placeholder="Email Search" aria-label="Email" matInput [form ...

javascripthtmlangulartypescriptmat-autocomplete

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

htmlangulartypescriptiframe

Include brand logo to the Bootstrap navigation bar

Following the method provided in Bootstrap documentation, I included the following code: <div class="container"> <a class="navbar-brand" href="#"> <img src="/img/hangers.jpg" alt= ...

htmlcssbootstrap-5web-frontend

Enhance the form values using HTML and Javascript before submitting them via POST

Greetings to all! Apologies if my question seems elementary, as I am relatively new to using Javascript/HTML... I am encountering an issue with PayPal integration. In the past, I have successfully implemented it with a single fixed price, but now I have ...

javascripthtmlformsdynamicpaypal

What are the best methods for ensuring a website maintains consistent visibility across all different screen sizes?

Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...

javascripthtmlcssfrontendweb-deployment

Switch between various components using multiple buttons in Next.js

I am in the process of creating a component that will display different components depending on which button the user selects. Here are the available “pages”: ` const navigation = [ { name: "EOQ", return: "<EOQgraph />" }, { nam ...

javascriptcsstwitter-bootstrapnext.js

Searching for an index of a value fails after functions have been anonymized

I recently created a basic javascript animation that involves swapping images on a carousel and fading them in and out. My goal is to generalize the functions so that I can repurpose them for other projects. While most of the animation is functioning corr ...

javascriptjqueryhtml

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

Hey there, I hope you're doing well in this new year. I've been working on a project that creates a "league table" using a large amount of data, similar to those seen in sports like football. The backend is built in PHP to process the data and d ...

javascriptphpjqueryhtmlajax

The text link on an iOS device is trapped by a persistent blue border

I've encountered an issue on my iOS device. When I open the menu with a popup, there is a blue border around the text element, even though it's not a hyperlink underline. https://i.sstatic.net/WA3rz.jpg I attempted to resolve this using the fol ...

javascripthtmlcssiosiphone

When working with multipart form data in Express JS, the values retrieved from text fields may appear as empty strings in the

I have a current project where I've implemented a basic sign-up page for users to input their information. The backend is built with express JS. Within this project, I added the functionality for users to upload a profile picture. However, in order f ...

htmlnode.jsexpressmultipartform-datamulter

Converting coordinates to pixel-based fixed positioning in CSS

After creating an animated square pie chart using basic CSS to display it in a grid format, I am now looking to transform the larger squares into a state map grid. Any ideas on how to achieve this? In my JavaScript code snippet below, I believe there is a ...

javascripthtmlcsswaffle-chart

How can I achieve a jQuery fade effect when hovering over an element?

I am looking for guidance on how to hide the <img /> tags within this particular structure and then fade them in upon mouseover using jQuery/css. The concept is to have the HTML <img> element hidden initially, only to smoothly fade in when hov ...

jqueryhtmlcssfadein