Attempting to display a brief description when hovering over a particular project image

My goal on is to display a description when hovering over a portfolio image by setting the opacity to 1. However, this functionality seems to not be working.

.description {
  display: block;
  opacity: 0;
  text-align: left;
  height: 130px;
  padding-top: 50px;
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
}
section img:hover ~ .description {opacity: 1;}

Answer №1

To achieve the desired effect, you must utilize the sibling selectors ~ and +.

Update:

For a demonstration, please visit http://jsfiddle.net/btevfik/PAvDJ/.

Here is another example:

http://jsfiddle.net/btevfik/nJSMg/

In case the fiddles become unavailable in the future.

HTML:

<div class="section">
<img src="http://placekitten.com/100/100" />
<div class="description">HELLO</div>
<img src="http://placekitten.com/100/100" />
<div class="description">WORLD</div>
</div>

CSS:

.description {
opacity: 0;
}
img:hover + .description {
opacity:1;
}

Answer №2

The issue at hand is the absence of a sibling element next to the IMG tag that can be selected.

Here is the current structure:

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
  </a>
  <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
</div>

What you should have instead is:

<div class="span12 dark">
  <a href="http://whatever.org">
    <img src="http://lorempixel.com/400/200">
    <p class="description">I re-designed Trulia's iPhone and iPad experiences, surfacing local data and heatmaps, while improving the core search experience. The project was also an opportunity to define a new visual language for all of Trulia.</p>
   </a>      
</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

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

I recently tried to center the navigation links on my website using Bootstrap. I followed the instructions on the w3schools documentation and also watched a YouTube video for additional guidance. Both resources suggested adding the justify-content-center c ...

the function fails to run upon clicking the button again

Here is the current function in use: function beTruthful() { if (document.getElementById("about").style.opacity = "0") { document.getElementById("about").style.opacity = "1"; } else { document.getElementById("about").style.opacity ...

Show the menu when hovering in reactjs

Currently, in my react project, I am implementing dropdown menus using the reactstrap css framework. Example.Js <Dropdown className="d-inline-block" onMouseOver={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ...

What are the steps to add a Search Box to my HTML Website?

Currently, I am in search of a way to incorporate a "Search" feature on my website that is built solely with HTML. I have added a Search box for the users but I'm uncertain about how to proceed next. Can I use PHP to enable the Search functionality o ...

Explore the Filter List without being affected by the arrangement of words or the level of search precision

I was able to resolve the issue by adjusting my search filter algorithm. Now, I can search regardless of word order, but the results are not as specific as I need them to be. When I type "Correy" in the search bar, it shows all results containing that wo ...

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Currently, I am utilizing puppeteer to fetch certain elements from a webpage, specifically class items (divs). Although I understand that getElementsByClassName returns a list that needs to be looped through, the function always returns undefined for me, e ...

Is it possible for me to develop a mobile application using JavaScript, HTML, and CSS and distribute it for sale on the App Store, Google Play Store, and Microsoft Mobile App Store at

I have a keen interest in web standards such as Javascript, HTML, and CSS. My goal is to utilize these languages to develop applications for mobile devices like phones and tablets. I am also considering selling these applications on various platforms inclu ...

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

"Ensure only one checkbox is selected at a time by unchecking the previous

Hi, I'm facing two issues with the code below. The first problem is that when I select checkbox number 3, it automatically selects number 2 as well. I only want this to happen if I manually check it (similar to checkbox number 2). The second issue i ...

What is the best way to show all cards in Angular when no filtering input is provided?

I have implemented a filter feature for multiple cards in Angular using Pipes. The filter works well, but I am facing an issue where no cards are displayed when there is no input value provided. I would like all the cards to be displayed when no input is g ...

Check that EACH radio button has been either selected or left unselected when the button is clicked

I'm still learning Javascript and currently working on a function triggered by a button click. My goal is to display an alert if NONE of the radio buttons have been selected, regardless of whether they are "Yes" or "No." If ALL radio buttons have been ...

Use the double data type in MySQL to handle null values when blank form fields are submitted

Currently, I am facing an issue with a form that I have created to update a mysql database using PHP and HTML. In my MySQL database, I have set the data type as double (3,1). The problem arises when I submit data to the database and leave some form input f ...

Creating an indentation on one side of a div using CSS for a visually appealing effect

https://i.stack.imgur.com/io6m0.jpg I'm in the process of trying to create two shapes using CSS. I've been able to almost achieve the first shape on the left, but it extends out too far. As for the second shape, I'm having difficulties cre ...

Utilizing CSS grid layouts to ensure images expand to fit the dimensions of the designated column and

I am currently working with a CSS grid layout that is displaying as follows: .image__gallery-grid { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.5rem; dis ...

What is the best way to prevent buttons from shifting when I enlarge the font size in HTML?

Is there a way to make buttons increase in size when hovered over without causing the other buttons to shift to the side? I've tried using the following code to achieve this but it's not working as expected: <style> button{transition-d ...

Tips on storing the amount of time a user devotes to answering questions on my form into a database

I am facing an issue with storing the "duration" in my database. The "duration" I aim to store is the time spent by the user answering a question I created. When they click the submit button, I want to save the duration they spent in the database. Below i ...

What are some techniques for managing scrolling within a particular element?

I am currently working with Vue.js and utilizing Element UI components. I want to incorporate a scroll management function to achieve infinite scrolling. To better understand, please refer to the screenshot in the Example section: Despite trying differen ...

The width of DIVs in Mac Safari exceeds that of other browsers

Encountering an issue that is specific to MAC Safari. Here's the code snippet: <div class="wrapper" style="max-width:1220px"> <div style="width:50%;display:inline-block">First</div> <div style="width:25%;display:inline-block"&g ...