Is it possible to change the text displayed when hovering over various images using just CSS and HTML?

Question

Is it possible to change the text displayed when hovering over various images using just CSS and HTML?

I have created an image and text hover effect. There are four images and corresponding paragraphs for each image. When hovering over an image, the specific paragraph should replace the previous one using only HTML and CSS. Please note the following: The design should ensure that the discovery paragraph is active if no other text is hovered over. The code below shows my attempt:

HTML Code:

<div class="image-slide">
        <a href="#discovery"><img src="discovery.jpg" alt="discovery"></a>
        <a href="#recommendation"><img src="recommendation.jpg" alt="recommend"></a>
        <a href="#implementation"><img src="implementation.jpg" alt="implementation"></a>
        <a href="#review"><img src="review.jpg" alt="review"></a>
    </div>

    <div id="discovery" class="paragraph-slide">
        <h3>Discovery</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach, therefore needing every detail to formulate the right financial plan to work towards your needs and goals.</p>
    </div>

    <div id="recommendation" class="paragraph-slide">
        <h3>Recommendation</h3>
        <p>Similar to Discovery, this meeting is crucial in gathering and reviewing financial data for developing the right plan suited to your individual needs and goals.</p>
    </div>

    <div id="implementation" class="paragraph-slide">
        <h3>Implementation</h3>
        <p>Once the recommendations are made, it's time to put them into action. This step involves executing the proposed financial plan to achieve your desired outcomes.</p>
    </div>

    <div id="review" class="paragraph-slide">
        <h3>Review</h3>
        <p>After implementing the plan, regular reviews and adjustments are essential to ensure it continues to align with your financial goals and aspirations.</p>
    </div>

CSS Code:

.image-slide{
    margin: 50px 0px 30px 50px;
}

.company-process h3{
    font-family: 'Cinzel-Regular';
    font-size: 22px;
    color: #1a1a1a;
    text-align: center;
    margin:50px 0 5px 0;
}

.company-process img{
    cursor: pointer;
}

.company-process .paragraph-slide p{
    font-family: 'Raleway-Regular';
    font-size: 16px;
    color: #666666;
    margin:20px 50px 20px 50px;
    padding: 0;
}

html css bootstrap-4

Answer 1

Answer №1

I tackled a challenging task and managed to grasp the essence of what you're looking for. Although I utilized different HTML tags, I believe my code is quite comprehensible. However, if you need any clarifications, feel free to ask :)

Here's a brief overview of my approach:

In the initial step within the HTML code, I enclosed all the images (contained in figure tags) in a div element with the "container" class. Additionally, I rearranged the sequence of images.

<div class="wrapper">
  <div class="container">
    <figure>
      <span>image 4 - review</span>
      <figcaption>This is review</figcaption>
    </figure>
    <figure>
       <span>image 3 - implementation</span>
      <figcaption>This is implementation</figcaption>
    </figure>
    <figure>
       <span>image 2 - recommendation</span>
      <figcaption>This is recommendation</figcaption>
    </figure>
    <figure>
       <span>image 1 - discovery</span>
      <figcaption>This is discovery</figcaption>
    </figure>
  </div>
</div>

But why reverse the order? Let's proceed to the next step below.

The second step involves the CSS aspect. I decided to reverse the image order based on the concept that the last image's caption should be displayed without hovering while remaining hidden when its siblings are hovered over. Initially, I applied "float: right" to ensure proper output order.

figure {
  display: inline-block;
  float: right;
  margin: 5px;
}

By default, all captions are set to "display: none" except for the last image's caption (which corresponds to image 1 in the HTML code sequence) which is set to "display: block".

figcaption {
  position: absolute;
  left: 0;
  display: none;
}

figure:last-child figcaption {
  display: block;
}

Subsequently, whenever the image captions, excluding the last one, are hovered over, they switch to "display: block".

figure:not(last-child):hover figcaption {
  display: block;
}

Finally, to hide the last image's caption (image 1 in the HTML code order), use the "~" selector (figure:not(last-child):hover ~ figure:last-child figcaption) in CSS.

figure:not(last-child):hover ~ figure:last-child figcaption {
  display: none;
}

The "~" selector essentially references all preceding elements.

Below is the complete code snippet:

.container {
  float: left;
}

figure {
  display: inline-block;
  float: right;
  margin: 5px;
}

figure span {
  display: block;
  width: 150px;
  height: 100px;
  border: 1px solid;
}

figcaption {
  position: absolute;
  left: 0;
  display: none;
}

figure:last-child figcaption {
  display: block;
}

figure:not(last-child):hover figcaption {
  display: block;
}

figure:not(last-child):hover ~ figure:last-child figcaption {
  display: none;
}

<div class="wrapper">
  <div class="container">
    <figure>
      <span>image 4 - review</span>
      <figcaption>This is review</figcaption>
    </figure>
    <figure>
       <span>image 3 - implementation</span>
      <figcaption>This is implementation</figcaption>
    </figure>
    <figure>
       <span>image 2 - recommendation</span>
      <figcaption>This is recommendation</figcaption>
    </figure>
    <figure>
       <span>image 1 - discovery</span>
      <figcaption>This is discovery</figcaption>
    </figure>
  </div>
</div>

Answer 2

I tackled a challenging task and managed to grasp the essence of what you're looking for. Although I utilized different HTML tags, I believe my code is quite comprehensible. However, if you need any clarifications, feel free to ask :)

Here's a brief overview of my approach:

In the initial step within the HTML code, I enclosed all the images (contained in figure tags) in a div element with the "container" class. Additionally, I rearranged the sequence of images.

<div class="wrapper">
  <div class="container">
    <figure>
      <span>image 4 - review</span>
      <figcaption>This is review</figcaption>
    </figure>
    <figure>
       <span>image 3 - implementation</span>
      <figcaption>This is implementation</figcaption>
    </figure>
    <figure>
       <span>image 2 - recommendation</span>
      <figcaption>This is recommendation</figcaption>
    </figure>
    <figure>
       <span>image 1 - discovery</span>
      <figcaption>This is discovery</figcaption>
    </figure>
  </div>
</div>

But why reverse the order? Let's proceed to the next step below.

The second step involves the CSS aspect. I decided to reverse the image order based on the concept that the last image's caption should be displayed without hovering while remaining hidden when its siblings are hovered over. Initially, I applied "float: right" to ensure proper output order.

figure {
  display: inline-block;
  float: right;
  margin: 5px;
}

By default, all captions are set to "display: none" except for the last image's caption (which corresponds to image 1 in the HTML code sequence) which is set to "display: block".

figcaption {
  position: absolute;
  left: 0;
  display: none;
}

figure:last-child figcaption {
  display: block;
}

Subsequently, whenever the image captions, excluding the last one, are hovered over, they switch to "display: block".

figure:not(last-child):hover figcaption {
  display: block;
}

Finally, to hide the last image's caption (image 1 in the HTML code order), use the "~" selector (figure:not(last-child):hover ~ figure:last-child figcaption) in CSS.

figure:not(last-child):hover ~ figure:last-child figcaption {
  display: none;
}

The "~" selector essentially references all preceding elements.

Below is the complete code snippet:

.container {
  float: left;
}

figure {
  display: inline-block;
  float: right;
  margin: 5px;
}

figure span {
  display: block;
  width: 150px;
  height: 100px;
  border: 1px solid;
}

figcaption {
  position: absolute;
  left: 0;
  display: none;
}

figure:last-child figcaption {
  display: block;
}

figure:not(last-child):hover figcaption {
  display: block;
}

figure:not(last-child):hover ~ figure:last-child figcaption {
  display: none;
}

<div class="wrapper">
  <div class="container">
    <figure>
      <span>image 4 - review</span>
      <figcaption>This is review</figcaption>
    </figure>
    <figure>
       <span>image 3 - implementation</span>
      <figcaption>This is implementation</figcaption>
    </figure>
    <figure>
       <span>image 2 - recommendation</span>
      <figcaption>This is recommendation</figcaption>
    </figure>
    <figure>
       <span>image 1 - discovery</span>
      <figcaption>This is discovery</figcaption>
    </figure>
  </div>
</div>

Answer 3

Answer №2

If you want to incorporate some JavaScript into your website, take a look at the following code snippet:

$('.photo-gallery div').on('click', function() {
  $('.description').hide();
  var target = $(this).attr('data-target');
  $(target).show();
});

.photo-gallery {
  margin: 20px;
}

.description h3 {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: #333;
  text-align: center;
  margin: 10px;
}

.description p {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #666;
  margin: 5px;
}

.description {
  display: none;
}

.description.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photo-gallery">
  <div data-target="#nature-info">Nature</div>
  <div data-target="#city-info">City</div>
  <div data-target="#beach-info">Beach</div>
</div>
<div id="nature-info" class="description active">
  <h3>Nature</h3>
  <p>Beautiful natural scenery captured in stunning photographs.</p>
</div>
<div id="city-info" class="description">
  <h3>City</h3>
  <p>Vibrant cityscapes from all around the world.</p>
</div>

<div id="beach-info" class="description">
  <h3>Beach</h3>
  <p>Relaxing beach views that transport you to paradise.</p>
</div>

Answer 4

If you want to incorporate some JavaScript into your website, take a look at the following code snippet:

$('.photo-gallery div').on('click', function() {
  $('.description').hide();
  var target = $(this).attr('data-target');
  $(target).show();
});

.photo-gallery {
  margin: 20px;
}

.description h3 {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: #333;
  text-align: center;
  margin: 10px;
}

.description p {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #666;
  margin: 5px;
}

.description {
  display: none;
}

.description.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photo-gallery">
  <div data-target="#nature-info">Nature</div>
  <div data-target="#city-info">City</div>
  <div data-target="#beach-info">Beach</div>
</div>
<div id="nature-info" class="description active">
  <h3>Nature</h3>
  <p>Beautiful natural scenery captured in stunning photographs.</p>
</div>
<div id="city-info" class="description">
  <h3>City</h3>
  <p>Vibrant cityscapes from all around the world.</p>
</div>

<div id="beach-info" class="description">
  <h3>Beach</h3>
  <p>Relaxing beach views that transport you to paradise.</p>
</div>

Answer 5

Answer №3

Here is a suggestion you could consider.

Place the text within the anchor tag. Create a panel with relative positioning to place the text inside. Initially hide the text, and when the anchor is hovered over, display the text.

.pane {position:relative;}
.pane .image-slide img {height:100px;}
.pane a {float:left;}
.pane .paragraph-slide
{
  position:absolute;
  display:none;
  top: 150px;
  left: 0;
}

.pane a:hover .paragraph-slide {
  display:block;
}


.image-slide {
  margin: 50px 0px 30px 50px;
}

.company-process h3 {
  font-family: 'Cinzel-Regular';
  font-size: 22px;
  color: #1a1a1a;
  text-align: center;
  margin: 50px 0 5px 0;
}

.company-process img {
  cursor: pointer;
}

.company-process .paragraph-slide p {
  font-family: 'Raleway-Regular';
  font-size: 16px;
  color: #666666;
  margin: 20px 50px 20px 50px;
  padding: 0;
}

<div class="pane">
  <div class="image-slide">
    <a href="#discovery"><img src="https://www.fillmurray.com/200/300" alt="discovery">
      <div id="discovery" class="paragraph-slide">
        <h3>Discovery</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>
    </a>
    <a href="#recommendation"><img src="https://www.fillmurray.com/300/300" alt="recommend">
      <div id="recommendation" class="paragraph-slide">
        <h3>Recommendation</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>

    </a>
    <a href="#implementaion"><img src="https://www.fillmurray.com/400/300" alt="implementation">
      <div id="implementaion" class="paragraph-slide">
        <h3>Implementaion</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>
    </a>
    <a href="#review"><img src="https://www.fillmurray.com/200/300" alt="review">
      <div id="review" class="paragraph-slide">
        <h3>Review</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>
    </a>
  </div>
</div>

Answer 6

Here is a suggestion you could consider.

Place the text within the anchor tag. Create a panel with relative positioning to place the text inside. Initially hide the text, and when the anchor is hovered over, display the text.

.pane {position:relative;}
.pane .image-slide img {height:100px;}
.pane a {float:left;}
.pane .paragraph-slide
{
  position:absolute;
  display:none;
  top: 150px;
  left: 0;
}

.pane a:hover .paragraph-slide {
  display:block;
}


.image-slide {
  margin: 50px 0px 30px 50px;
}

.company-process h3 {
  font-family: 'Cinzel-Regular';
  font-size: 22px;
  color: #1a1a1a;
  text-align: center;
  margin: 50px 0 5px 0;
}

.company-process img {
  cursor: pointer;
}

.company-process .paragraph-slide p {
  font-family: 'Raleway-Regular';
  font-size: 16px;
  color: #666666;
  margin: 20px 50px 20px 50px;
  padding: 0;
}

<div class="pane">
  <div class="image-slide">
    <a href="#discovery"><img src="https://www.fillmurray.com/200/300" alt="discovery">
      <div id="discovery" class="paragraph-slide">
        <h3>Discovery</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>
    </a>
    <a href="#recommendation"><img src="https://www.fillmurray.com/300/300" alt="recommend">
      <div id="recommendation" class="paragraph-slide">
        <h3>Recommendation</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>

    </a>
    <a href="#implementaion"><img src="https://www.fillmurray.com/400/300" alt="implementation">
      <div id="implementaion" class="paragraph-slide">
        <h3>Implementaion</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>
    </a>
    <a href="#review"><img src="https://www.fillmurray.com/200/300" alt="review">
      <div id="review" class="paragraph-slide">
        <h3>Review</h3>
        <p>This meeting is held about one week after the FIT Meeting and normally runs about two hours. This is where all the pertinent financial data is gathered and reviewed. We take a very comprehensive approach,and therefore need every itty bitty detail
          to formulate the right financial plan to work towards your needs and goals.</p>
      </div>
    </a>
  </div>
</div>

Answer 7

Answer №4

Employ the title attribute in img tags like this:

<img src="...." alt="this text will display if image fails to load" title="this text appears when hovering"/>

Answer 8

Employ the title attribute in img tags like this:

<img src="...." alt="this text will display if image fails to load" title="this text appears when hovering"/>

Is it possible to change the text displayed when hovering over various images using just CSS and HTML?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with input width percentage not functioning as expected

Tips for optimizing HTML and CSS for better browser performance

I'm looking to create a unit test for my AngularJS application

Enhancing the functionality of a bootstrap button with the addition of an

hover effect with fading transition while mouse is still hovering

Using JavaScript, conceal a specific Div by examining the content within another Div

PHP error: Index not defined

Adjust the height of the box based on the content within its flexbox

Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

Hierarchy in CSS: The battle between author and user styling

Creating responsive images in Bootstrap columns

Issue with closing collapsed menu on click in Bootstrap version 3

Notify user with a Javascript alert if there are no search results found

HTML/JavaScript: Embrace the Power of Dynamic Page

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

The container's :before pseudo-element features a sleek white border

Anticipated spatial glitch problem involving the gadicc/meteor-reactive-window package for Meteor

Switch up the appearance of a document by manipulating the stylesheet using a select tag

keep the color of the link after clicking until a different link is clicked

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide