Add a gray background to the div box when hovering over the image and text

Is there a way to change the fill color of the div box surrounding the image and text to grey when hovering over it using CSS?

http://jsfiddle.net/huskydawgs/G3rLu/

    <div id="wrapper-icons">
    <div class="icons_row">
        <div class="icons_cell1">
            <a href="http://www.thesurfboardproject.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2013/10/JoseAngelGreg-Noll-1010-640x360.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.thesurfboardproject.com/" target="_blank">Surfboard 1</a></p>
        </div>
        <div class="icons_cell2">
            <a href="http://www.apple.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2012/07/1957-Hobie-Balsa.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.apple.com/" target="_blank">Surfboard 2</a></p>
        </div>
        <div class="icons_cell3">
            <a href="http://www.ibm.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2013/09/Interisland-Gun.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.ibm.com/" target="_blank">Surfboard 3</a></p>
        </div>
        <div class="icons_cell4">
            <a href="http://www.espn.com/" target="_blank"><img alt="Surfboard" height="140" src="http://previewcf.turbosquid.com/Preview/2010/12/03__01_46_00/Surfboard_V3_2.jpge90d89a5-aaf9-44ac-b8cc-3327a5dc064bLarger.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.espn.com/" target="_blank">Surfboard 4</a></p>
        </div>
    </div>
</div>
csshtmlhover

Answer №1

To enhance the design, include border: 2px solid transparent; in the styling for 

.icons_cell1, .icons_cell2, .icons_cell3, .icons_cell4
. Additionally, add the following code:

.icons_cell1:hover, .icons_cell2:hover, .icons_cell3:hover, .icons_cell4:hover {
    border:2px solid #BBB;
}

If you only apply the hover effect to the code, there might be a noticeable shift in content when the border is displayed. To resolve this issue, setting a transparent border on the cells by default is recommended.

I also suggest adopting the approach suggested by others by assigning two classes to your divs. This strategy can help streamline your CSS code and make it more concise.

Answer №2

Consider including a :hover effect for each of your .icons_cell classes. Alternatively, you could assign all .iconscell(NUMBER) elements the same class to simplify your CSS styling.

.icons_cell1:hover {
    border: 2px dotted black;
}

Answer №3

Check out this super easy example: here.

To create a hover effect for a border, simply use .class:hover{...}. Remember to add a default white border to prevent the image from shifting when hovered over.

Answer №4

Create a custom class to apply a specific style to elements that require a generic behavior. Let's name this class highlightOnHover.

.highlightOnHover:hover {
  border: 2px solid blue;
}

Simply add this class to any element where you want this behavior to take effect. For example...

<div class="image_box highlightOnHover">
   ...
</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

Testing the Limits of CSS Hover

I'm having trouble figuring out how to implement this. When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatl ...

javascripthtmlcssuser-interfacebootstrap-4

Heroku NodeJS - Page Not Found: Error 404

I recently set up a Heroku server with BootBot running on it, but I'm facing challenges while trying to render an HTML page from it. Here is what I have in my code: var app = express(); var path = require('path'); app.use(express.static(pat ...

javascripthtmlnode.jsexpress

Encountering a glitch while iterating through function results in failure after the initial modification

I am facing some errors with the script provided below: var sections = ["#general_info", "#address_records", "#employment_history", "#driver_experience", "#military_experience", "#eeo_survey", &qu ...

javascriptjqueryhtmlformsvalidation

Rearrange content using media queries

Is it possible to rearrange the position of two HTML elements when accessing a website from a tablet? Here is the current setup: <section id="content"></section><!-- End section#content --> <aside id="sidebar"></aside><!- ...

javascriptcss

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Currently delving into Selenium WebDriver while utilizing Java.. I am curious about how to select values in a Multi-select box where the options are already pre-selected. If I want to choose two or more additional options, how can I go about it? The HTML ...

javahtmlseleniumselenium-webdriver

Adjusting the width of the Bootstrap input group-prepend/addon

I am encountering difficulties with ensuring that all prepend add-ons have the same width. The issue arises when using Font Awesome icons, as each prepend is sized according to its specific icon. I came across a similar thread from approximately one year a ...

htmlcssbootstrap-4

How can I designate class #1 to the left and class #2 to the right within a loop?

Within a loop in Wordpress, two classes, photos and videos, are generated. As new photos or videos are added, they appear below the last div. The issue I'm facing is that I want all photos to be displayed on the left and all videos on the right, but u ...

phpjavascriptcsswordpressloops

JavaScript validation for basic "select" isn't functioning as expected

I need assistance with my simple "select" validation using JavaScript. The issue I am facing is that when validating the "select" element, it does not display the select options to users after a validation error occurs. "The select option is not re-enabl ...

javascripthtmlvalidation

Tips for positioning a div element at the bottom of a webpage

I am currently working on placing this banner ad at the bottom of the page. I want the image to be positioned within the banner div without overlapping the div above it. .banner { width: 100%; } .banner img { width: 100%; max-he ...

htmlcss

Show either the abbreviated or complete form of the text

Initially, the default display should show the shortened version of each element (one line with "..." included). All items must consistently be shown in either the shortened or full-length version. If all items are in shortened mode - clicking on one item ...

javascripthtmlcss

display upcoming schedule and time

How can I display the future date and time in the respective field components? See below for a sample code snippet: require([ "dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser" ], function(lang, registry, ready ...

javascriptjqueryhtmldatetimedojo

Move the page to the beginning of the vertical stepper upon clicking the "next" button

I am currently working on optimizing a lengthy form to enhance user experience. To illustrate my point, I have come across a simplified example of the code I am dealing with which can be found here. My primary goal is to ensure that when a user proceeds t ...

javascripthtmlangularmat-stepper

Whenever I incorporate a media query in my CSS, I find that I am losing some of the stylings

Recently, I've started using media queries in my application to ensure that the webpages are responsive. It's a new concept for me and I'm still learning how to properly implement it. Below is an example of how I am incorporating media quer ...

cssresponsive-design

Is there an issue with the vertical alignment of two adjacent empty inline blocks?

body { border: 2px solid black; height: 100px; } div { vertical-align: middle; display: inline-block; width: 50px; height: 50px; } .a { border: 2px solid red; margin-top: 20px; } .b { border: 2px solid green; } <!DOCTYPE html> & ...

css

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

When working with a String variable in JSP and trying to display it in a form field, there might be an issue if the string contains spaces. Only the first word is displayed instead of the entire sentence. Below is the code snippet along with the resulting ...

javahtmlcssjsp

Align two span elements to the right using Bootstrap's float-right class

My task is to align two span elements, one with the Bootstrap 4 class 'close' and the other with class 'badge', to the right. However, whenever I try to float the badge to the right, they end up right next to each other. On the other ha ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

What are the advantages of using classes versus ids for managing multiple li elements in example 20 with knockout and jQuery? Is one option more efficient and easier to maintain

<ul class="sellerDetails sellerdetailsData " data-bind="attr: { id: 'sellerdetailsData-' + $index()}"> <li><span class="buyerprocess-sprite seller-name"></span> <p class="leftfloat"> <span data-bind=" ...

javascriptjquerycssknockout.jsknockout-2.0

Positioning of the navigation menu

After customizing my Bootstrap navbar, I noticed that when the responsive size changes to mobile, the burger menu opens on the left side. Is there a way to move it to the right? Any help would be appreciated. Here is the HTML code: <!DOCTYPE html> ...

htmlcssbootstrap-4

Place a button to the right side of every row to handle overflow-x

I'm trying to place a button next to each row in my table, but here's the catch: the table is inside a div with a fixed width and overflow-x for responsiveness. I want the button to appear next to each row outside of the container div. Currently ...

htmlcsshtml-table

Leveraging icons with Bootstrap 4.5

I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use t ...

javascriptcssbootstrap-4icons