Hover - Image

Hi! I need some help!

I want to do a hover with some images I got on my website. They’re black and white and I want to do a colored hover with it

the problem is

I don’t have a html source to edit it, it’s like this:
image

and I have no idea how to put my code there, i’ve tried div class inside it but it didn’t work

7 Likes

Do you have access to the CSS stylesheet?

6 Likes

Yes i do!

I tried to do this:

image

and then i put

<div class=“honey1”> *something here </div>

but then my image disappeared

5 Likes

url should be between “”

.honey1 {
   background-image: url("......");
}

But I would suggest using a Javascript eventHandler to change the source on mousover event.

5 Likes

Thank you so much for your help.

5 Likes

Did it work? Can I see the webpage you are making?

4 Likes

Actually it didn’t work, I tried something else and this was my result:

This is the website i’m working on: https://pcx.services/

4 Likes

Hover in what way? Like zoom in, out, which way?

3 Likes

@trevorhodges You see those black logos? She makes them get their original colour on mouseover :slight_smile:

4 Likes

Thanks. I can’t access the link, so I didn’t really know.

Wait, got it:

HTML

<div>
    <img src="http://i.stack.imgur.com/lvici.jpg" />
</div>

CSS

body {width: 600px; height: 600px;margin: 100px auto;text-align: center}
div {margin: 0 auto}

img {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .8s ease-in-out;  
    }

    img:hover {
    filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.01);
    }

I hope this helps =)

4 Likes

This code made my site look like this:

I still can’t do the hover i want to and I have no idea what else I could do :frowning:

5 Likes

I want this image

to turn into this

and I want to do the same with every other logos right there

3 Likes

Javascript might be of use here :wink: Can you add a js file to the website?

But trevors way might even be better since it doesn’t require javascript.

3 Likes

Using javascript you could do the following:

First in the HTML assign an Id to the image say for instance id="honey1".
Have the sourcecode be the gray one.

Also at the end of the body link the html to the javascript
<script type="text/javascript" src="script.js"></script>

Then create a javascript file named script.js

Ok now make the magic happen :wink:
Call the ID of the image from the HTML document and assign it to a constant variable honeyWell

const honeyWell = document.getElementById("honey1");

Now lets add an event function, on mouse over do whats between the {}.

honeyWell.onmouseover = () => {

    // Change the source of the image to that of your coloured image, make sure the link is between "".
    honeyWell.src = "url of coloured one here"

}

This should work ;). Just copy the code and make it work for each other logo.

3 Likes

Alternatively you could add the javascript directly into the HTML file inside the body between the script tags.

<script>....code here....</script>

You don’t need to link to a js file since the code is in the same file.

3 Likes

There may not be a JS file, nor do you need one.

Try this maybe:
<style type=“text/css”>
A:hover { COLOR: red; TEXT-DECORATION: none; font-weight: none }
</style>

Put that upon that by making that symbol in text using that font, or something close.

Something else may work called an image map to help you out.

See this post for more on an image map:

4 Likes

She needs to use images because she has to apply this effect to all logo’s of their clients.

3 Likes

This is a suprisingly complicated issue. I have tryed some things out and here is what i came up with.

<head>
<style>
<!-- set grayed out image on css load -->
.logo{
	content:url("https://codecademy-discourse.s3.dualstack.us-east-1.amazonaws.com/original/5X/5/6/2/f/562fd97239188e075d6d264469433d6f60ac8586.png");
}
<!-- on hover change to colored image -->
.logo:hover{
	content:url("https://codecademy-discourse.s3.dualstack.us-east-1.amazonaws.com/original/5X/3/f/7/2/3f7281c2baef13649f11a8de4dfbc9a9c31b5b1d.jpeg");
}
</style>
</head>
<body>
<!-- load in colored image so it loads on page load. -->
<img src="https://codecademy-discourse.s3.dualstack.us-east-1.amazonaws.com/original/5X/3/f/7/2/3f7281c2baef13649f11a8de4dfbc9a9c31b5b1d.jpeg" class="logo" />
</body>

cause the colored image is ridiculus big compared to the grayed one it loads in the colored image first. else you would get a flickering effect on the logo.

Note: comments does not work in style sheet so take those out before using.

If you cant change the source of the image in the html you can use this:

<head>
<style>
.logo:hover{
	content:url("https://codecademy-discourse.s3.dualstack.us-east-1.amazonaws.com/original/5X/3/f/7/2/3f7281c2baef13649f11a8de4dfbc9a9c31b5b1d.jpeg");
}
</style>
</head>
<body>
<img src="https://codecademy-discourse.s3.dualstack.us-east-1.amazonaws.com/original/5X/5/6/2/f/562fd97239188e075d6d264469433d6f60ac8586.png" class="logo" />
</body>

But in that case you realy want to use a smaller image (kb’s) for your colored logo. Cause like i said it will flicker on first hover.

6 Likes

I made it to work using javascript!! Html and CSS! I found out I forgot to reset the image src the moment the mouse exits the image :D. Also the javascript call should be loaded at the end of the HTML so it knows what the DOM is.

For html I did the following to test it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <img id="honey1" src="assets/honeywell_black.png">
  <script type="text/javascript" src="script.js"></script>
</body>
</html>

For the javascript I did as followed:

// Call the item from the dom by ID
const honeyWell = document.getElementById('honey1');

// On mouse over do:
honeyWell.onmouseover = () => {

    // Change the source of the image to that of your coloured image, make sure the link is between "".
    honeyWell.src = "assets/honeywell_coloured.png";

};

// On mouse leave do:
honeyWell.onmouseleave = () => {

  // Reset the image to its original state the moment the mouse leaves the image
  honeyWell.src = "assets/honeywell_black.png";

};

CSS I used to style the page .
The image now changes to a coloured picture upon hover and resets when the mouse leaves the image.

Make sure you put all images in the same folder and have the coloured and black ones to be of the same size and have the same amount of whitespace so they only differ in colour.

4 Likes

Best would be to use svg images since they are small in size.

4 Likes