Stylish CSS Effects on Hover

I'm currently in the process of developing a website and I would like to enhance my buttons with a hover effect that involves loading another image or button with a slightly different color scheme. These new images have been created in Photoshop.

However, when I implement the code, nothing seems to happen as expected.

Below is the code I am using:

CSS:

#main{
    position: relative;
    background-color:#ececec;
    height:900px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;

}

#main .button2{
    position: absolute;
    left:0.5%;
    top: 71.5%;
    z-index:20;
    width:170px;
    height:40px;
}
#main .button2:hover{
    background-image : url(images/buttBootsRollover.png);  

}

HTML:

<div id="main">
<article>

<section>
    <a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
    <a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
    <a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
</section>

</article>

Here is an image which might provide a clearer visual representation:

My ultimate goal is to incorporate this same hover effect on all nine buttons present on the site.

htmlcsshovereffects

Answer №1

Your current approach is a bit faulty. Setting the background-image property on an element with an image that fills the entire space can lead to complications. Instead of delving into why your result is not as expected, I suggest avoiding this method altogether and offering you an alternative solution:

Remove the img elements from within your div elements. Update the background-image property of your button2 class to display the desired default image. Keep your .button2:hover property unchanged.

Answer №2

Here is the solution you've been searching for. If you haven't already, I suggest giving Google a try first. It might also be helpful to start with a basic CSS tutorial. 

#main{
    background-color:#ececec;
    height:500px;
    width: 600px;
    margin:0px auto;
}
.button{               
        z-index:1000;
        width:170px;
        height:40px;        
        display:block;
        background-repeat:no-repeat;
}  
#but_one{
    background-image : url(images/but_one.png);
} 
#but_two{
    background-image : url(images/but_two.png);
} 
#but_three{
    background-image : url(images/but_three.png);
} 
#but_one:hover{
    background-image : url(images/but_one_h.png);
} 
#but_two:hover{
    background-image : url(images/but_two_h.png);
} 
#but_three:hover{
    background-image : url(images/but_three_h.png);
} 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css" />
        <title>hi css</title>
    </head>
    <body>
    <div id="main">
    <a href="index.php" ><img id="but_one" class="button" /></a>
    <a href="index.php" ><img id="but_two" class="button" /></a>
    <a href="index.php" ><img id="but_three" class="button" /></a>
    <div>
    </body>
 </html>

Answer №3

perhaps with the assistance of jquery, you can achieve your desired outcome

<div class="box">
    <a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
    <div class="overlay">play me!</div>
</div>

<div class="box">
    <a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<div class="overlay">play me!</div>
</div>

<div class="box">
    <a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
<div class="overlay">play me!</div>
</div>

jquery

$(function(){
    $(".box").hover(function(){
      $(this).find(".overlay").fadeIn();
    }
                    ,function(){
                        $(this).find(".overlay").fadeOut();
                    }
                   );        
});

Check out a live demonstration

Answer №4

Showcasing a creative way to use a single background image by hiding a portion of it.

Take a look at this example where the image doubles up http://jsfiddle.net/edheal/Qb7YG

Check out the code snippets below:

CSS:

#wibble
{
    background-image: url(http://well-spun.co.uk/portfolio/technologies/images/rollover.png);
    background-position: left top;
    background-repeat: no-repeat;
    height: 14px;
    width: 200px;
}

#wibble:hover
{
    background-position: left -14px;
}

HTML:

<div id="wibble">
</div>

The image is 28px tall - revealing either the top or bottom half based on hovering.

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

ToggleButtonGroup in Material UI is a great way to create toggle

I am trying to implement the ToggleButtonGroup feature from Material UI in my React application. I am facing an issue where I am unable to pass values into my state correctly. The code snippet provided below shows that while the Select component works fi ...

cssreactjsmaterial-ui

The app is opening the index.html file instead of the expected index.jsx file

After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...

htmlreactjsnpmjsxdelete-file

Finding the element and extracting its text value

Below is the HTML code: <span> <b>Order number:</b> </span> <span>A36HASJH</span> The value within the span element, A36HASJH, is dynamic and changes with each order. How can I identify this element and store it as a s ...

javahtmlseleniumxpathselenium-webdriver

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Below is the DOT code snippet in Viz.js that I am working with: digraph G { node [fontname = "font-awesome"]; 17 [id=17, shape="hexagon", label=<<TABLE BORDER="0"> <TR><TD>undefined</TD></TR> <TR><TD>[47-56]< ...

javascriptjqueryhtmlsvggraphviz

CSS experts caution that the addition of margin and padding can cause the screen to jump

When I apply margin and padding to this class, it starts glitching like in the second GIF. However, if I remove margin and padding everything works fine, but I do need them for styling purposes. What could be causing this issue and how can I resolve it? ...

htmlcss

Shifting the hover effect to a click event with ReactJS

Encountering an issue with hover and active states on mobile. Here is the link to my code: https://codesandbox.io/s/inspiring-wozniak-33l61?file=/src/Portfolio.scss I am attempting to change the background color of containers when tapped on mobile devices ...

reactjsmobileonclickhover

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with: class InitialForm(Form): trn = IntegerField(widget=NumberInput, required = False) klient = ChoiceField(choices=KLIENTS, required = False) class SecondForm(Form): faktura = CharField(max_length = ...

cssdjangodjango-forms

Words fail to display

.sport { content: url("../img/sport.png"); background-color: rgba(0,0,0,1.0); top: 61px; height: 310px; width: 300px; position: absolute; margin: 0; left: 0; border-radius: 4px; overflow: hidden; } .sportsandactivis { background-colo ...

htmlcss

Having difficulty rendering JSON data on an HTML webpage

Currently, I am working on an API App that utilizes the Foursquare API. With the help of my getRequest function, I am able to obtain results in JSON format, which are then displayed in my console.log. However, the challenge lies in parsing the data from J ...

javascriptjqueryhtmljson

Issues with CSS3 Animation failing to trigger upon hovering over links

Background: Looking to design a visually appealing hover effect for links in the future Current Demo Link: You can view the demo here specifically on Firefox Browser. body { color:#ffffff; font-family:"Helvetica"; font-size:12pt; backgr ...

htmlcsscss-animations

Guide on enabling the scrollbar within a text area while utilizing the pointer-events: none property

After applying the CSS rule pointer-events: none to the text area, I noticed that the scrollbar was disabled. I need the scrollbar to remain enabled so that users can scroll and view the entire content, while still preventing editing within the textarea u ...

htmlcsssassflexboxscss-mixins

Switch the CSS class for the currently selected link

There are 5 links on the page. When I click on each link, it changes color. However, when I move my cursor to another area of the page, the active link loses focus and I can't show its current state. Can you please advise me on how to fix this issue? ...

htmlcss

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

JavaScript struggles when dealing with dynamically loaded tables

I am currently working on integrating the javascript widget from addtocalendar.com into my website. The code example provided by them is displayed below. Everything functions as expected when I place it on a regular page. However, I am facing an issue wher ...

javascriptphpjqueryhtmlajax

Using jQuery's toggleClass method to implement CSS transformations

I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...

jquerycsstoggleclass

Automatic Hiding of Dropdown Menu in Twitter Bootstrap: A Quick Guide to Set a 2-Second Timer

Is there a way to make the dropdown menu hide automatically after the mouse cursor leaves the area? If you take a look at Amazon.com for example, when you hover over "Shop by Department" and then quickly move your cursor away and back within about half a ...

csstwitter-bootstrapdrop-down-menu

Creating a tree with branches using divs: a comprehensive guide

I have been tasked with designing a tree structure for a project that will visually represent the results of a quiz. The tree needs to have branches on both sides, featuring 4 main branches, each with 5 smaller branches extending from them. Additionally, I ...

htmlcss

The value binding for input elements in Angular 4 remains static and does not reflect changes in the UI

Struggling with binding input to a value in angular 4? Take for example [value]="inputFrom". Sometimes it updates when I change inputFrom, other times it doesn't. How can I ensure the input always changes whenever inputFrom changes, not sporadically? ...

htmlangulartypescriptdata-binding

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml