Designing image hover effects using CSS

Question

Designing image hover effects using CSS

I am looking for guidance on how to achieve a similar effect to the one shown here:

Specifically, I want to create a box with images that appears below a button when the user hovers over it.

The box should remain visible as long as the user's mouse is on either the box or the button.

Currently, my code is functioning but lacks the inclusion of images:

CSS

.tooltip{
    position: relative;
}

.tooltip:hover:after{
    background: #000000;
    top: 30px;
    color: #FFFFFF;
    padding: 10px 10px;
    content: attr(id);
    left: -90px;
    position: absolute;
    z-index: 98;
    width: 200px;
}

HTML

<button class="tooltip" id="Select an image<img src='a.png'/><img src='b.png'/><img src='c.png'/><img src='d.png'/>" style="margin-left:160px;">Select</button>

EDIT: Updated Question

html css

Answer 1

Answer №1

Can you style a div like this using CSS?

<style>

#select {position: relative; width: 80px; margin: 0 auto;}
button {width: 80px;}

#images {overflow: hidden; position: absolute; bottom: -50px; left: 50%; margin-left: -100px; width: 200px; display: none;}
img {float: left; width: 50px; height: 50px;}
img {background: red;}
img:nth-child(2) {background: green;}
img:nth-child(3) {background: blue;}
img:nth-child(4) {background: yellow;}

#select:hover #images {display: block;}

</style>

<div id="select">
    <button>select</button>

    <div id="images">
        <img>
        <img>
        <img>
        <img>
    </div>
</div>

Check out the code snippet here!

Answer 2

Can you style a div like this using CSS?

<style>

#select {position: relative; width: 80px; margin: 0 auto;}
button {width: 80px;}

#images {overflow: hidden; position: absolute; bottom: -50px; left: 50%; margin-left: -100px; width: 200px; display: none;}
img {float: left; width: 50px; height: 50px;}
img {background: red;}
img:nth-child(2) {background: green;}
img:nth-child(3) {background: blue;}
img:nth-child(4) {background: yellow;}

#select:hover #images {display: block;}

</style>

<div id="select">
    <button>select</button>

    <div id="images">
        <img>
        <img>
        <img>
        <img>
    </div>
</div>

Check out the code snippet here!

Designing image hover effects using CSS

Answer №1

Similar questions

Is there a problem with the Drag and Drop API?

Invalid Value Provided for CSS Clip Path

Saving and restoring the cursor/caret position in CKEditor 4: A how-to guide

Tips for efficiently obtaining JSON Ajax data, saving it to local storage, and presenting it in a jQuery Mobile list view

Adjust the height of a responsive div to match its adjacent element

Not all the divs nested within the main div are having the class applied to them

Count of elements in one flexbox row

The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

Ensure Website Accessibility by Implementing Minimum Resolution Requirements

Is it possible to apply varying CSS styles depending on the parent element's class?

What steps can be taken to turn this html code and css into a mobile application?

Creating a corner ribbon for a Material UI Card: A step-by-step guide

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

How can you retrieve script data within HTML and PHP tags?

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

The confusion between <g:if> and <g:set> features in Grails is causing some issues

Can this PHP code be optimized for better efficiency?

Space in the middle of a body and a div

Converting an HTML page into a JSON object by scraping it

Steps for creating a transparent Bootstrap navbar:1. Start by creating