Wanted to see if this was possible without custom development. I'd like to use portfolio items, but when you hover over the image, a new image appears in its place. Possible?
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
However, whenever I update the page - half of this gets deleted and it just become a static image...
Apologies, I changed my way of achieving this probably 5 minutes before you replied!
I am now using:
<div class="change-image"></div>
with custom css:
.change-image{
background-image:url("http://dev.yovo.me/wp-content/uploads/2014/06/p4b.jpg");
width:500px; /*image width*/
height:500px; /*image height*/
align:center
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.change-image:hover{
background-image:url("http://dev.yovo.me/wp-content/uploads/2014/06/p4.jpg");
}
Its working much better - except the images are not adjusting with the screen size.... I'd like it to stay 4 images across and be responsive... Is there a way to do this?
Hey IAN,
Wanted to see if this was possible without custom development. I'd like to use portfolio items, but when you hover over the image, a new image appears in its place. Possible?
Thanks!
Jonathan
I've almost got it to work using this:
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
However, whenever I update the page - half of this gets deleted and it just become a static image...
Thanks!
I figured it out - I'm using Raw HTML and the following code:
<html > <head> <style type="text/css"> .imgBox { width: 300px; height: 300px; background: url(http://dev.yovo.me/wp-content/uploads/2014/06/p8.jpg) no-repeat; } .imgBox:hover { width: 300px; height: 300px; background: url(http://dev.yovo.me/wp-content/uploads/2014/06/p9.jpg) no-repeat; } </style> </head> <body> <div> </div> </body> </html>
Question: if I do 2 rows of this - how do I remove the gap between the rows: http://dev.yovo.me
Hey Jonathan!
I dont see any gaps in there ?
Thanks
ThemeNectar Support Team
Hi Tahir,
Apologies, I changed my way of achieving this probably 5 minutes before you replied!
I am now using:
with custom css:
.change-image{ background-image:url("http://dev.yovo.me/wp-content/uploads/2014/06/p4b.jpg"); width:500px; /*image width*/ height:500px; /*image height*/ align:center -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .change-image:hover{ background-image:url("http://dev.yovo.me/wp-content/uploads/2014/06/p4.jpg"); }
Its working much better - except the images are not adjusting with the screen size.... I'd like it to stay 4 images across and be responsive... Is there a way to do this?
Thanks!