I tried to display a picture when you hover on a span-tag. I looked it up on the internet, but what I found didn't work. I now ended up with this code:
<span style="display:inline-block;">
<img class="manImg" src="_src/mypicture.jpg">
</span>
...and the question is where to put the 'hoverable' text. When I hover on that text it will show the image.
img { display: none; }
.parent:hover img { display: block; }
Example
You can do this by css only.
<span class="container">
<p class="hover-text">Hover text here</p>
<img class="manImg" src="_src/mypicture.jpg">
</span>
.container {
display: inline-block;
}
.manImg {
display: none;
}
.hover-text:hover ~ .manImg {
display: block;
}
You can do it using JavaScript on onmouseover event.
<span style="display:inline-block;" onmouseover="your javascript code">
Here is one way you can do it:
function mouseIn() {
$('.img').addClass('show');
}
function mouseOut() {
$('.img').removeClass('show');
}
$('.hover-me').hover(mouseIn, mouseOut);
.img {
display: none;
}
.img.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
<p class="hover-me">hi</p>
<img src="http://static.ddmcdn.com/en-us/apl/breedselector/images/breed-selector/dogs/breeds/australian-shepherd_01_sm.jpg" class="img">
</span>
This takes advantage of JQuery's hover. The image is hidden by default. When your mouse hovers over the text, I add a class to show the image. When your mouse stops hovering, I remove the class to hide the image again.
Related
I have a giant list of images currently in an unordered list and i'm now trying to alter it to display another image over the original only when hovered and in process of that, hide the original image.
I can almost get it to work with the below code but it's only hiding the original picture and not bringing the new picture into view.
.mainImg {
opacity: 1;
}
.mainImg:hover {
opacity: 0;
}
.hidgeImg {
display: none;
}
.hideImg:hover {
display: inline-block;
}
<!-- dont know if the picture CSS is relevant but here it is -->
#pictures li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
#pictures img {
vertial-align: top;
max-height: 350px;
}
<ul id="pictures">
<li>
<a href="/"><img src="image1.jpg" class="mainImg">
<img src="image2.jpg" class="hideImg">
</a>
</li>
</ul>
I have commented the code where it is relevant to you.
You were very close, what needs to happen is you need a parent element that, when hovered over, will handle the hovering events for each of its parent images.
If you remove the ability to see mainImg on hover for example, then there is no element to be hovering over that makes hideImg display.
If you have a parent object to hover over, that is always 'displayed' (but never has any visual other than its child img) then you can handle hover events via thisparent.
This is down by specifying what is being hovered over, followed by the query/selector of the element you want to change (E.G .parent:hover .child{CSS HERE;})
<head>
<style>
//When parent is hovered voer, make main hidden and hideen displayed
#hoverelement:hover .hideImg{
display: inline-block;
}
#hoverelement:hover .mainImg{
display: none;
}
//Hide Img is hidden by default
.hideImg{
display: none;
}
<!-- dont know if the picture CSS is relevant but here it is -->
li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
img {
vertial-align: top;
max-height: 350px;
}
#MainArea{
background-color:tan;
padding:5%;
}
</style>
</head>
<body>
<div id="MainArea">
<ul id="pictures">
<li>
<a href="/" id="hoverelement"><!--Add a parent element to handle hovering -->
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="mainImg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="hideImg">
</a>
</li>
</ul>
</div>
</body>
CSS
I have the following issue.
In a demo part I have the code below:
<style>
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
</style>
<div class="manImgA">
<img src="url-to-image-1">
</div>
<div class="manImgB">
<img src="url-to-image-2">
</div>
<div class="manImgC">
<img src="url-to-image-3">
</div>
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
When you move the mouse cursor over one of the text paragraphs an image should appear. That will work if I replace the paragraphs above the code with the images.
But when I put in the structure like I showed above it doesn't work.
I tried to find answer online why it doesn't work... I post my question here because I didn't fine a clear answer.
Maybe this is what you are looking for?
Anyway siblings selector is for element that come after not before.
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
<div class="manImgA">
<img src="https://dummyimage.com/300x300/000/fff&text=ONE">
</div>
<div class="manImgB">
<img src="https://dummyimage.com/400x400/000/fff&text=TWO">
</div>
<div class="manImgC">
<img src="https://dummyimage.com/600x600/000/fff&text=THREE">
</div>
If you want only with pure css,you must change pure css:
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text:hover + div { display: block; }
<p class="text prijsa">Standard size</p>
<div class="manImgA">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>
<p class="text prijsb">Big size</p>
<div class="manImgB">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>
<p class="text prijsc">Very big size</p>
<div class="manImgC">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>
The tilde ~ targets siblings which follow in the HTML markup order...
A ~ B = target B if and only if it follows A
To employ this feature of CSS in your example use something like this in your stylesheet...
/* hide all divs with a class
which begins with 'manImg' */
div[class^=manImg] {
display:none;
}
/* show div when p.prijs* element hovered */
p.prijsa:hover ~ div.manImgA,
p.prijsb:hover ~ div.manImgB,
p.prijsc:hover ~ div.manImgC {
display:block;
}
Hope that helped. :)
I created a simple input type file placeholder like this:
input[type="file"] {
display: none;
}
.image .first {
display: none;
}
.image .second {
display: block;
}
.image:hover .first {
display: block;
}
.image:hover .second {
display: none;
}
<div class="image">
<input type="file" id="file-input" />
<label for="file-input">
<div class="first" style="height: 40px;background-color: red;"></div>
<div class="second" style="height: 40px;background-color: blue;"></div>
</label>
</div>
Whenever, I hover over the .image element I need to display .first and hide .second. This is happening successfully if I don't click on the file-input label.
However, when click on file-input label, the hover state persists(the red div shows) even after navigating away.
Here's a pen.
I want to change the displayed image, when the curosor is hovering over the a tag with plain css
My guess was to write something like this, but it didnt work:
.folder a:hover > .folder img{
content: url(new picture);
}
here is my code
html:
<div>
<div class="folder">
<img></img>
folder1
</div>
...
</div>
css:
.folder img{
content:url(pictures/folderdarkblue.png);
}
It will be quite hard to do that using plain css with your current html code due to css not really allowing backward navigation. If you don't mind using the <a> after your image, you could try doing this:
https://jsfiddle.net/ksec65wm/
<div class="folder">
folder1
<img class='one' src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class='two' src="http://www.w3schools.com/images/colorpicker.png"/>
</div>
CSS:
img.one {
display:none;
}
a:hover ~ img.one {
display: inline-block;
}
a:hover ~ img.two {
display:none;
}
Instead of trying to change picture on the hover of each individual div, why don't you try setting the opacity to 0, and then add the next picture?
Some hints
.box-container:hover .image-container,
.box-container:hover #picture {
opacity: 0;
}
Heres an example I found that is quite nice as well
https://jsfiddle.net/m4v1onyL/
The basic css goes as the following
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
As you can see we just toggle between two images like this in an <a> tag.
I have a strange behavior in HTML + CSS: When I hover the picture it move a little (both in Chrome and ie 10). If the picture is in the top, it doesn't occuer.
This is very simple code, so I don't know what to do.
With this CSS:
div.effect img.image {
/*type your css here which you want to use for both*/
}
div:hover.effect img.image {
display: none;
}
div.effect img.hover {
display: none;
}
div:hover.effect img.hover {
display: block;
}
And this HTML:
<div class="effect" style="position: absolute; bottom:15px;right:135px;" title="Update from us">
<img class="image" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
<img class="image hover" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</div>
You can see here in: http://jsfiddle.net/LmMSH/
Thanks in advance!
Add this to your css:
div.effect img.image {
/*type your css here which you want to use for both*/
display: block;
}
See it here: http://jsfiddle.net/LmMSH/2/
EDIT:
If you want to change pictures when user hover on div use this css:
img.image{
display: block;
}
img.hover{
display: none;
}
div.effect:hover img.image {
display: none;
}
div.effect:hover img.hover {
display:block;
}
http://jsfiddle.net/LmMSH/11/
Try this:
div.effect img.image {
float: left;
}
Give this CSS too
div{height:60px}