Display elements on hover of thumbnails using CSS

Question

Display elements on hover of thumbnails using CSS

I'm struggling with the logic of displaying images when hovering over corresponding thumbnails using only CSS. If necessary, I can do it in JavaScript. Here's my latest attempt.

<div id='img-container' class='grd12'>

    <img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
    <img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
    <img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
    <img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>

</div>

     <img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>

     <img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>

    <img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>

   <img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>

Here is the CSS code:

#img-container{
    position:relative;
    top:0px;
    left:0px;
    height:950px;
}
.slide-images{
    position:absolute;
    top:0px;
    left:0px;
 }
 .thumbnail > img{
    margin-left:auto;
    margin-right:auto;
    display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
    display:none;
}

javascript html css

Answer 1

Answer №1

In my opinion, achieving this effect using just CSS may be possible but not very feasible in terms of scalability. It might be more practical to utilize JavaScript instead. For instance:

img#thumb1:hover ~ #img4>#image4{
    display:none;
}

The selector you have used is incorrect. The general sibling selector only selects elements that come after the initial match. In this scenario, your image thumb comes after your image, whereas the selector is searching for an image after an image thumb. This contradicts the intended behavior. There isn't a 'sibling before' selector available in CSS.

An easier approach, as opposed to manipulating CSS selectors, would be to assign each thumbnail a click event that alters the source of a single image tag every time (or alternatively, transitions between images with animation). By doing so, you reduce the amount of markup needed, minimize positioning concerns, and can dynamically generate the image display.

For example, to obtain the ID of an image, you could link a click event to each thumbnail and then retrieve the image ID stored within a data attribute:

$('.thumbnail').on('hover', function() {
    var activeImg = $(this).data('imgid');
    // Proceed to set the main image with the corresponding image source
}

Answer 2

In my opinion, achieving this effect using just CSS may be possible but not very feasible in terms of scalability. It might be more practical to utilize JavaScript instead. For instance:

img#thumb1:hover ~ #img4>#image4{
    display:none;
}

The selector you have used is incorrect. The general sibling selector only selects elements that come after the initial match. In this scenario, your image thumb comes after your image, whereas the selector is searching for an image after an image thumb. This contradicts the intended behavior. There isn't a 'sibling before' selector available in CSS.

An easier approach, as opposed to manipulating CSS selectors, would be to assign each thumbnail a click event that alters the source of a single image tag every time (or alternatively, transitions between images with animation). By doing so, you reduce the amount of markup needed, minimize positioning concerns, and can dynamically generate the image display.

For example, to obtain the ID of an image, you could link a click event to each thumbnail and then retrieve the image ID stored within a data attribute:

$('.thumbnail').on('hover', function() {
    var activeImg = $(this).data('imgid');
    // Proceed to set the main image with the corresponding image source
}

Answer 3

Answer №2

It is completely achievable using only CSS. The key lies in adjusting the structure of your HTML. Take a look at this sample:

Every thumbnail and full-size image is contained within a div element
The full-size image initially has opacity: 0; to hide it
On hover, the full-size image within the container gets opacity: 1, producing a smooth fade-in effect thanks to the transition property
z-index: 1 ensures that the full-size images appear above the thumbnails

Complete Code Example

.item {
  float: left;
  position: relative;
}
img {
  display: block;
  cursor: pointer;
  margin: 5px;
}
.fullsize {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 1;
  top: 0;
  left: 0;
  pointer-events: none;
}
.item:hover .fullsize {
  opacity: 1;
}

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<!-- Repeat for additional items -->

Answer 4

It is completely achievable using only CSS. The key lies in adjusting the structure of your HTML. Take a look at this sample:

Every thumbnail and full-size image is contained within a div element
The full-size image initially has opacity: 0; to hide it
On hover, the full-size image within the container gets opacity: 1, producing a smooth fade-in effect thanks to the transition property
z-index: 1 ensures that the full-size images appear above the thumbnails

Complete Code Example

.item {
  float: left;
  position: relative;
}
img {
  display: block;
  cursor: pointer;
  margin: 5px;
}
.fullsize {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 1;
  top: 0;
  left: 0;
  pointer-events: none;
}
.item:hover .fullsize {
  opacity: 1;
}

<div class="item">

  <img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
  <img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

<!-- Repeat for additional items -->

Display elements on hover of thumbnails using CSS

Answer №1

Answer №2

Complete Code Example

Similar questions

Exporting a React parent function to a child component

Error: The value of 'v4' property is not defined and cannot be read

Simulating an API request using Vue and Jest/Vue test utils

Can I increase the top margin by more than mt-5?

Attempting to use express and nodemailer to send an email, but there is absolutely no output appearing in either the console or the terminal

Ways to distinguish XmlHttpRequest Access-Control-Allow-Origin issues from regular network errors

Creating a tooltip for new list items: A step-by-step guide

Utilizing CSS for Page Orientation

Implementing a NextJS client component within a webpage

It is imperative that the query data is not undefined. Be certain to provide a value within your query function that is not undefined

Floating with Bootstrap Utility

Why is the Border Radius hiding the corners of my image?

Using jQuery to load and parse a JSON file stored on a local system

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

Looking to authenticate a CSS span class within an XML document using Oxygen Program?

Tips for utilizing a shared controller in an Angular Material popup dialogue

When generating a fresh event and attempting to link the event ID to its creator, unexpected obstacles emerged

Fetching an item from Local Storage in Angular 8

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout