I am trying to do a image change when the mouse rolls over the image, but I have to use CSS not java script. I got the image to show up, but it shows up behind the first image, it doesn't replace it.
<img id="rollover" src="cat.jpg" width="250" height="188" alt="Cat">
#rollover:hover {background-image: url(dog.jpg);}
img {padding: 5px;}
Don't use the img tag.
Use the a itself:
a
{
display:inline-block;
width: 250px;
height: 188px;
background: red;
}
a:hover
{
background: blue;
}
Set the first image via CSS also.
<div id="rollover" width="250" height="188"></div>
#rollover {
background-image: url(cat.jpg);
}
#rollover:hover {
background-image: url(dog.jpg);
}
You dont need anotehr element of A...
#rollover { background-image: url(cat.jpg);
width: 250px; height: 188px;
display: block;
}
#rollover:hover { background-image: url(dog.jpg); }
You could have two images and switch display property example
#dog{
display: none;
}
#cambio:hover > #cat{
display: none;
}
#cambio:hover > #dog{
display:block;
}
<a href="#" id="cambio">
<input type="button" id="dog" value="Perro" />
<input type="button" id="cat" value="Gato" />
</a>
Related
Just wondering if a div can be called without using javascript.
such as
my_div:hover{ add new layout}
is there a version for click eg
my_div:click{add new layout}
Thanks
Yes, if you add tabindex="0" to your div, you make it clickable and can then use the :focus pseudo-class to apply styles.
<div class="clickable" tabindex="0"></div>
.clickable {
height: 100px;
background: blue;
}
.clickable:focus {
background: red;
}
Codepen example. Clicking the div should give it focus and apply the :focus CSS to it. Clicking away from it will unfocus (blur) it and reset the default styles.
Not directly, but you can fake it using checkboxes:
input[type=checkbox] {
display: none;
}
.content {
display: none;
padding: 20px;
background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
display: block;
}
<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
<h3>Content</h3>
<p>lorem20</p>
</div>
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
In my php page dynamically visualize the thumbnails. To make sure that these are all of the same size I do in this way
<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>
CSS
img.centered {
background-repeat: no-repeat;
background-position: center center;
}
/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}
I would like to display a different image on event: hover, but this does not work. How could I do that? thanks
You could always do it like this.
HTML:
<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
<div class="overlay"></div>
</div>
CSS:
.image {
width: 200px;
height: 200px;
border: 1px solid;
}
.overlay {
width: 100%;
height: 100%;
}
.overlay:hover {
background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}
So here we have the image you are getting via PHP on top as a div. And inside we have the overlay, the image you want when a user is hovering. So we set that to 100% width and height so it takes up all of the parent div and set the hover.
DEMO HERE
In your example the <img> always lays over the <a> background-image.
To avoid that, you could hide the image on hover. But that is kinda ugly ;)
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
a.zoom:hover img
{
opacitiy: 0;
}
try this
<img class="centered" src="thumb/default.png"/>
and jquery
$(".centered").attr("src","second.jpg");
I have this code <input type="submit" value="Register" />
How do I insert
<img src="http://i.imgur.com/m9KT9CQ.png"
onmouseover="this.src='http://i.imgur.com/T9hpI23'"
onmouseout="this.src='http://i.imgur.com/m9KT9CQ.png'"/>
onto this button? Thanks!
have a look at this link
http://screwdesk.com/how-to-create-html-rollover-image-button-using-css/
basically this css
a.btn {
display: block;
width: 294px;
height: 87px;
cusror: pointer;
background-image: url(rollover-image-button-1.png);
text-indent: -9999em;
}
a.btn:hover {
background-image: url(rollover-image-button-2.png);
}
Use this code:
<button type="submit">
<img src="http://i.imgur.com/m9KT9CQ.png" onmouseover="this.src='http://i.imgur.com/T9hpI23'" onmouseout="this.src='http://i.imgur.com/m9KT9CQ.png'"/>
</button>
I would like to know how to update image A when I hover over image B using only CSS, is it possible? if not how will I do that using only pure JavaScript (no library). But css is really what I want to use....
This depends entirely on your mark-up, as I pointed out in the comments. In the absence of seeing any mark-up to work with, I can only post some general suggestions; however it's important to note that the element you want to affect (F) must appear later in the DOM (be a child of the element F, or be subsequent sibling, or descendant of a subsequent sibling) than the element E with which you want to interact.
That said, the following approaches will work, with the associated mark-up:
Sibling-based selection:
Hovering over the first img inside of #a toggles the display of the subsequent img elements, using the E ~ F (general sibling) combinator:
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second,
#a img.first:hover ~ img.second {
display: none;
}
#a img:hover ~ img.first {
display: none;
}
#a img:hover ~ img.second {
display: inline-block;
}
JS Fiddle demo.
Hovering over #a changes switches the display of the .first and .second images inside of #b, using the E + F (immediate sibling) combinator:
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
</div>
<div id="b">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a,#b {
float: left;
border: 1px solid #000;
padding: 0.2em;
}
img.second {
display: none;
}
#a:hover + #b img.first {
display: none;
}
#a:hover + #b img.second {
display: inline-block;
}
JS Fiddle demo.
Descendant-based selection:
Using the E F general descendant combinator (I'm not actually entirely sure a space character is a combinator, but regardless...it's based on F being a descendant of E):
<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second {
display: none;
}
#a:hover img.first {
display: none;
}
#a:hover img.second {
display: inline-block;
}
JS Fiddle demo.
Using E > F the immediate-child/immediate-descendant combinator:
<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<div>
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
</div> div {
display: inline-block;
}
img {
display: none;
border: 1px solid #000;
padding: 0.2em;
}
#a > img {
display: inline-block;
}
#a:hover img {
display: inline-block;
}
JS Fiddle demo.
There's also the chance to use pseudo-elements and css-generated content (in compliant/up-to-date browsers):
<div id="a"></div>
#a {
width: 200px;
height: 400px;
background-image: url(http://www.lorempixel.com/200/400/people);
background-repeat: none;
background-position: 50% 50%;
position: relative;
}
#a:hover::after {
content: url(http://www.lorempixel.com/200/400/animals);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
}
JS Fiddle demo.
In your particular case it's easy, since #bg is a child of #hv
Just change your hover selector from what you have to this:
#bg:hover #hv {...}
See my fork of your fiddle here: http://jsfiddle.net/xJSQt/
To update the background position on the inner element #hv when hovering the outer element #bg, you can:
See this Working Fiddle Example!
#bg:hover #hv {
...
}
Simple. Let´s suppose you have a div like this:
<div class="myImage">
So, in CSS you set the normal background image, and then you use the :hover pseudo-element to change it to your desired rollover image. Something like:
.myImage{ background-image: url(imageA.jpg);} /*Set the normal image*/
.myImage:hover{ background-image: url(imageB.jpg);} /*Set the rollover image*/