Struggling With .SVG Rollover Image

HTML & CSS
1

Hi

I am really struggling to apply a .svg image button rollover.

here is where I am at, the site is built using Wordpress - http://meganbuttle.com/

It is the button bottom left (Showrooms)

I have used an image sprite that contains both buttons, but they appear smaller than the other buttons on the page and not sure why.

Please can someone help me acheive the rollover effect and make the buttons the same size as the others whilst still being responsive, I would really appreciate it.

.sprite { display: inline-block; width: 550px; height: 125px; overflow: hidden; position: relative; }

.sprite img {
position: absolute;
width: 550px;
height: 125px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

.sprite:hover img {
top: -101px;
}

.sprite-one img {
left: 0;
top: 0;
}

Many Thanks

2

You need to half the dimensions. The whole sprite is 125px high, so if you want to hide half of it, make the height of .sprite 62px and the hover shift (top) the same.

If you just want to change the colour of the image, this can be done to sgv without sprite sheets by altering the background and fill properties via css. But for this to work the svg must be inline.

3

Hi

Thanks for the response the second option sounds like it could be easier, how would I do this, the button code is being enetered into Wordpress Visual Composer.

Thanks

4

I thought editing 2 lines of css was easier, but the second option is a more elegant solution.

.sprite img {
position: absolute;
width: 550px;
height: 62.5px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}

.sprite:hover img {
top: -62.5px;
}

You would have to put the svg in the html inline, that is to image code in <svg> tags rather than an <img>. I tend to do this via a php include, just to keep the working code a bit tidier.

<?php include $_SERVER["DOCUMENT_ROOT"]."/images/icon.svg"; ?>

You can edit the svg to add classes to its elements, which you can then target with css selectors and alter various properties. Eg, you can alter the colour of the fill or stroke or whatever.

5

Hi

Thanks again, I added your updated CSS, but it does not seem to be behaving correctly?

Also the button image should be the same size as the big button top right, any ideas?

Also when I add <?php include $_SERVER["DOCUMENT_ROOT"]."/images/luxury-bathrooms.svg"; ?> to my Wordpress header file I get an error mesage.

Really appreciate it.
6

Sorry, the css I posted was wrong. I had it working fine in “Inspect”, but edited the wrong selectors in the code I copied from your post.
The height 62.5px should be on .sprite not .sprite img.

That was just an example include, it should contain the correct filepath to your svg.

http://meganbuttle.com/wp-content/uploads/2016/04/showrooms-sprite.svg

This is only if you are going for the second, inline option, in which case you don’t want the sprite image, just the single image. The include should not be in the header, but in place of the <img> tag. But since you are struggling, maybe stick with the sprite method for now and forget the include.

7

Hi

I have updated the page, the image is not showing but if you hover over that area it does appear, not sure what I have done wrong!

Thanks

8

OK, now that you have the image bigger, the original height and offset should fit.
So it should be

.sprite { height: 125px }
.sprite:hover img { top: -125px }

But also remove the top property from .sprite-one img.

9

Thanks again for all your help I think it is working now.

1 Like
10

Grrrrrrr! Only problem now is that the image is not being responsive how would I acheive this? Do I need to wrap it within a container div?

Thanks

11

It’s never going to be responsive if the dimensions are set in pixels. You need to set a max-width in px and use % for width and offsets and set the height using padding.

12

I am sorry, but not sure how to do this especially offsets.

13

Wait a while and i’ll have a look before saying anything more specific.

14

Something like this. It was a bit confusing because WP uses divs like Russian dolls.

.sprite {
  max-width: 550px;
  width: 100%;
  padding-bottom: 23%; /* or there abouts. This is to give the 'empty' container responsive height */
}
.sprite img {
   width: 100%;
  height: auto;
}
.sprite:hover img { top: -100% }

Edit
It’s not perfect at all sizes, looking into it…

1 Like
15

I was going to say no to that, because:

Which I personally don’t like, div within div within div etc, to one element. But in this case the max-width needs to be applied to a wrapper for .sprite for the padding trick to work when the max-width is exceded by the container.
There is already a <p> there not doing much. Maybe give that a class to apply the max-width to.

<p class="spritewrap">
   <a class="sprite sprite-one" href="/trade">
      <img src="http://meganbuttle.com/wp-content/uploads/2016/02/showrooms-sprite.svg" alt="Trade Customers" />
   </a>
</p>

.spritewrap { max-width: 550px; }
.sprite {
  width: 100%;
  padding-bottom: 23%;
}
.sprite img {
   width: 100%;
  height: auto;
}
.sprite:hover img { top: -100% }
16

Hi

I have added the code, do I now need to set up the media queries, as whenI resize for example to 1024px you see both buttons.

17

Do the queries alter the size of the buttons? If they never go bigger than 550px there should be no need.

18

If you resize the screen you will see the two buttonstates showing

19

I think part of the problem is how you are editing the css. You seem to be appending the snippets of code to the file rather than editing the required rules in, replacing/removing existing ones.
As a result you have the selector for .sprite 3 times with different contradicting rules.
Consolidate all the rules into one selector and remove duplicate and redundant ones.
You have added the .spritewrap class to the css, but it’s not on the <p> element in the html.

.sprite {
	display: inline-block;
	overflow: hidden;
	position: relative;
        width: 100%;
        padding-bottom: 22%;
}
.sprite img {
	position: absolute;
	width: 100%;
        height: auto;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
.sprite-one img {
	left: 0;
}      
.spritewrap { max-width: 550px; }

.sprite:hover img { top: -100% }
20

Awesome! Thanks mate for all your great help :slight_smile: