Displaying an element when hovering over another using CSS

Currently, I am experimenting with a small CSS action that involves displaying another element when an A element is hovered over. The code I have so far is quite simple:

<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>

.portfolio-reaction {
  width:250px;
  height:250px;
  display:block;
}

.headline-overlay {
    background:none;
    height:100%;
    width:100%;
    display:none;
    position:absolute;
    top:10%;
    z-index:999;
    text-align:left;
    padding-left:0.5em;
    font-weight:bold;
    font-size:1.3em;
    color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

You can also view a working demo on jsfiddle here: https://jsfiddle.net/yL231zsk/1/

Although this solution works in most cases, there are a few issues I'm currently facing. Firstly, when moving the mouse cursor over the button, the text seems to blink and I'm not sure why that is happening. Secondly, I am looking to expand the number of elements that appear from just one to three. So the structure I want to achieve is as follows:

<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
  <p class="element-1">abc</p>
  <p class="element-2">111</p>
  <div class="element-3">X</div>
</div>
</a>

I would appreciate any tips or advice on resolving these issues. Thank you.

Answer №1

Your CSS file contains the following code:

.attachment-grid-feat:hover ~ .headline-overlay {
    display:block;
}

This code will not work as intended because .attachment-grid-feat is not the parent of .headline-overlay. Therefore, it will not target the state when the parent is selected since there are no elements with the class .healine-overlay inside .attachment-grid-feat. Additionally, there is no need to use ~ between the two classes. The correct selector should be:

.portfolio-reaction:hover .headline-overlay {
    display: block;
}

With this selector, you are targeting the child element .healine-overlay when the parent element .portfolio-reaction (you may consider changing the <a> tag to a <div> tag) is hovered over.

.portfolio-reaction {
  width: 250px;
  height: 250px;
  display: block;
}

.headline-overlay {
  background: none;
  display: none;
  position: absolute;
  top: 10%;
  z-index: 999;
  text-align: left;
  padding-left: 0.5em;
  font-weight: bold;
  font-size: 1.3em;
  color: #000;
}

.portfolio-reaction:hover .headline-overlay {
  display: block;
}
<div title="#" class="portfolio-reaction" href="#">
  <img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
  <div class="headline-overlay">
    <div id="element-1">Hello 1</div>
    <div id="element-2">Hello 2</div>
    <div id="element-3">Hello 3</div>
  </div>
</div>

In this snippet of code, there are three elements contained within .headline-overlay. When hovered over, all three elements will be displayed.

Answer №2

To begin, modify the final CSS line as shown below:

.attachment-grid-feat:hover .headline-overlay {
    display:block;
}

This change will have a partial effect. Next, adjust the width and height of your

<div class="headline-overlay">
to match the square dimensions. Keeping it at 100% will cover the entire screen, ensuring the text remains visible regardless of cursor movement. Alternatively, if you prefer the <div> element to automatically fit the square size, maintain the width and height while switching its position:absolute to position:relative, making small adjustments to the top position.

You can view a demonstration here: https://jsfiddle.net/yL231zsk/9/

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

Clicking on the icon reveals the current date

I need some help with the input field that displays the calendar date. Currently, I can only click on the input field to show the calendar date. What I actually want is for users to be able to click on a calendar icon to display the calendar date, which sh ...

Using jQuery, generate a div element and display it in full screen mode

Is it possible to dynamically create a full-screen div using jQuery directly from JavaScript without the need to first define it in the HTML and then make it visible with jQuery or CSS? UPDATE After some troubleshooting, I found a solution to my issue: ...

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

I am currently utilizing Soup and Selenium to access a particular page . My objective is to extract a comprehensive list of pricing and ratings for different types of packaging available on this webpage. https://i.sstatic.net/3gbJ7.png Displayed below is ...

Managing the clearance of an absolutely positioned div with CSS

I'm encountering an issue where my page contains divs that are 250px x 250px and positioned absolutely. When one of these divs is opened, an ajax call expands the div to display all its contents. These divs have a maximum width of 600px but can vary i ...

Can a partially see-through front color be placed on top of an image?

My goal is to add a foreground color with opacity over some images within a div, allowing the image to still be visible. I've come across solutions on S.O., like this one, but they don't quite achieve what I'm looking for. Below is my HTML ...

Dynamic Bootstrap Tab menu slider with movable functionality when the limit is reached

I am facing an issue with the tabs menu on my website. The tabs menu items can vary between 2 or 3 to even 20 or more. When the number of navigation items exceeds 10, they automatically drop to the second line, which you can see here. However, I don' ...

The Art of Capturing Sound: Unleashing

Currently, I am attempting to capture video via html5 .getUserMedia and play it back without needing to upload it to a server. Despite following numerous tutorials, I have only been successful on Chrome by utilizing canvas to draw the webp image and then c ...

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project Currently, I am in the process of developing a picture framing calculator using a combination of HTML, CSS, and JavaScript. Functionality of the Calculator For this calculator, users will input values such as: Frame Width (wf): 16 ...

Display the final row by hovering over the line

<table> <thead> <tr> <th>First</th> <th>Second</th> <th></th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Dat ...

Split the page in half with a background image on one side and text on the other

Is there a way to split the page vertically, with a background image on one side and text on the other? I've been struggling to achieve this layout - the background image won't stay on the left while the text remains on the right. Can someone off ...

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

transition-duration is ineffective in a particular div

Whenever I hover over the purple text, I want it to increase in size using the zoom property. Here is an example: I am facing two issues: The time duration does not seem to work even when I try to apply it within the hover and non-hover classes. Wh ...

Eliminate borders for text input in Bootstrap 3 styling

Trying to eliminate the top, right, and left borders for text input fields in Bootstrap 3. The selector being used is as follows: input[type="text"] { border-top: 0; border-right: 0; border-left: 0; } However, in Chrome, a faint thin line is ...

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

Tips for positioning Bootstrap form labels and input fields in alignment

Currently, I am enhancing bootstrap-4 forms that consist of multiple input fields and labels. The form is functional, but I aim to elevate its visual appeal and user-friendliness. Working Snippet <link rel="stylesheet" href="https://stackpath.bootst ...

Is it possible to determine the search query if the search term appears within the website URL?

I'm trying to figure out which action url and name term to use when the search term is located in the middle of the URL. For instance, the HTML code below enables me to type text and upon pressing enter or the button, it redirects me to the website w ...

Resolving AJAX requests within a loop

I am working with a JSON file that contains widgets {"widgetname": "widget1", "widgetID": "FJRH585fKFJN234NC"} As I iterate through the JSON, I generate HTML for each widget object. $.ajax({ url: "get_json.php", data: {action: "get_widgets", ...

The downward trajectory of the Hamburger Menu is uncompromised, yet it refuses

Currently, I am utilizing Ruby on Rails 7 and Bootstrap 5. I encountered an issue with my hamburger menu functionality - it opens successfully but fails to close. Strangely, all other dropdowns work perfectly fine. Below is the snippet of the problematic c ...

Utilizing Selenium and Python to Extract Links from a Web Table

Currently, I am faced with a table that has two columns and an unknown number of rows. My task involves utilizing Selenium (with Python) to extract all the links from the second column and compile them into a list. https://i.sstatic.net/bvYez.png The obj ...

Implementing websocket functionality in Yii framework

I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...