The following code shows the image in the div tag.
<div class='item'>
<img class='img' src="image1.png" alt="" />
</div>
I am using the following css to add effects to the html image code:
img{
width:50px;
height:50px;
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
I am using this to have opacity effects in css. With this code, the opacity effect works well when I hover over the image itself. But how do I make it so that the opacity effect on the image occurs when I hover over the div tag instead. I want to be able to hover over any part of the item div which encapsulated the image, to get the change opacity effect on the image. NB effect on just the image not the entire div. Can this be done in css? If so how?
Change this:
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
to
.item:hover img{
opacity:1.0;
filter:alpha(opacity=100);
}
This will change the opacity of the img when the div is in hover state.
If you use jquery for this then I think this will be easy
$('.item').hover(function(){ $('.img').css('opacity','1.0');}, function(){ $('.img').css('opacity','0.4');});
I assume you know jquery. You can't use :hover pseudo class of CSS over elements that don't have href attribute according to Sitepoint.
Related
I have been playing with pseudo selectors and trying to figure stuff out.
This is the general look of the element I am trying to work on:
<div class=simpleGallery>
<a href="...">
<img data-attachment-id="some_number" ........>
</a>
</div>
I am trying to get text to show on a picture with a specific attribute (data-attachment-id for example). I managed to get it by searching for a href that ends in a unique way. Like this...
.simpleGallery a[href$="GP120094-1.jpg"]:before{
content:'Hokus Pokus';
position:absolute;
bottom:25%;
opacity:0;
width:100%;
text-align:center;
color:#fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-moz-transition: all 1.2s ease;
-webkit-transition: all 1.2s ease;
transition: all 1.2s ease;
}
And then I get the text to show with:
.simpleGallery a:hover:before{
opacity:1;
z-index:1;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
It all works, but I was wondering why it won't work with something like this:
.simpleGallery a:before img[data-attachment-id="some_number"]
How would it be done by the image data-attachment-id instead of href in the <a> tag?
And why?
Is it because the :before can only go after the last element I am looking for?
.simpleGallery a:before img[data-attachment-id="some_number"]
Is saying:
1.) find an element with the class "simpleGallery"
2.) find a descendant anchor tag
3.) target that element's :before pseudo element
4.) find a descendant img tag of that pseudo element who's data-attachment-id is equal to "some_number"
The problem here is that pseudo elements are not real elements on the dom (hence pseudo) so they don't have children, siblings, decedents, etc. so your selector is invalid.
How would it be done by the image data-attachment-id instead of href
in the tag?
Exactly how you have it: img[data-attachment-id="some_number"]
<div class="logoWrap">
<img src="https://i.imgur.com/OBFbjSK.png">
<p class="logoDesc">this is img desc</p>
</div>
I want to avoid using javascript, is it possible to change the value of other element using :hover? if possible I want to add transition.
http://jsfiddle.net/UH2Aq/
Do you mean that you want the hover on the logoWrap to make the logoDesc appear?
If so:
http://jsfiddle.net/wildandjam/emELN/
.logoWrap:hover .logoDesc{
opacity:1;
}
Then, if you want, you can add a CSS3 transition, to make it more fluid.
Same answer with transition : http://jsfiddle.net/UH2Aq/1/
.logoDesc{
transition: opacity .2s ease-in-out;
opacity : 0;
}
.logoWrap:hover .logoDesc {
opacity: 1;
}
I've been trying to make a navigation bar with small images which respond(by margin 10px from the top) when you hover over them. I applied the hover effects via a class Selector,
however when I hover over one image the rest of them respond as well. So, can I correct this with the class Selector?
Here's the html side.
<img class="menu" src="weight.png" />
<img class="menu" src="height.png" />
Here's the css:
.menu{
height:100px;
width:100px;
transition:all 0.3s ease-in; margin-left:15px;
margin-top:5px;
}
.menu:hover{
margin-top:15px;
transition:all 0.3 ease-in;
}
Thank you for your help.
The default vertical alignment for inline content is "baseline". This means that your images by default stick to the bottom of your a elements. To fix this, you simply need to set the vertical alignment on your img elements to "top":
.menu {
...
vertical-align: top;
}
JSFiddle demo.
Is it possible to have an image hidden by default and unhide it on :hover? I tried using the visibility property, but invisible elements can't be hovered on.
If you use display or visibility, the element is not there so you can't hover over it. Try it with opacity:0; . You can do it with css:
.img { opacity:0; }
.img:hover { opacity:1; }
I realize that you specifically asked about jquery, but it is possible to do what you're asking just with css, though you may have to use opacity:0 rather than display:none to hide the image.
You can use a css hover event. Start by applying a class to your image:
<img src="theimage.jpg" class="hidden-image"/>
In your css, you can then use the class and a css hover event to show the image when the cursor is over the image:
.hidden-image {
opacity: 0;
}
.hidden-image:hover {
opacity:1;
}
Here's a jsfiddle: http://jsfiddle.net/fZd7J/
Directly you can't mouseover/hover a hidden image that is, its not possible with visibility:hidden; or display:none;, but you can have some tricks to do that.
using css
apply opacity: 0; to the image and :hover change opacity:1;
using js
create a parent <div> to the image and mouseover to that div apply display:block; to image.
Working Fiddle Click here
I've got two divs, div 1, and underneath it is hidden div 2. When I hover over div 1, I want it to hide, and show div 2. Then, once I mouse off of the area (now div 2), div 1 is displayed again.
Here is the code:
<a href="javascript://" class="hoverable">
<div class="normal" style="background:#666;">Hover over me!</div>
<div class="hover" style="background:#888;">Now you see me!</div>
</a>
and here is the css:
<style>
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
}
.hoverable .hover {
display:none;
}
.hoverable:hover .normal {
display:none;
}
.hoverable:hover .hover {
display:block;
}
</style>
My only problem with this is that is is very quick, cut and dry, and not very "fancy". I'd like to add something simple like a fade effect.
I've gotten this working, without the fade effect, here:
http://jsfiddle.net/pBDGW/
If anyone knows how to make those two divs transition with a fade-out, please let me know!
You can use CSS transition with opacity like this:
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
position: relative;
display: block;
}
.hoverable .hover {
opacity:0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.hoverable .hover,
.hoverable .normal{
transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.hoverable:hover .normal {
opacity:0;
}
.hoverable:hover .hover {
opacity:1;
}
You can see the jsfiddle here: http://jsfiddle.net/pBDGW/12/
Some explanation:
The transition applied to both div are the main code that make them fade in & out. You can read more about it here: http://css3.bradshawenterprises.com/transitions/
Since you want the first div to fade out, and the second div to fade in, there will be a moment when both div have to be visible partially, hence position: absolute and some positioning on the second div (to make it overlap with the first div).
You are wrapping an anchor (<a>) around both div, which is actually not encouraged, so I have to give it display: block; . A better approach (HTML-wise) is to wrap both div inside another div (still use the same class hoverable), and use 2 different anchors inside each div.
EDIT: this approach http://jsfiddle.net/pBDGW/14/ works too. Here you only fade out the first div, while the second div is always visible but is hidden under the first div when not hovering. It is shorter css, but I don't recommend this approach though because I sometimes have issues with getting the first div to go on top on different browsers.
You can use jQuery, it has functions fadeIn and fadeOut and also its easy to hide() and show() on events mouseOver and mouseLeave.
You can see fiddle here.
$(document).ready(function(){$(".hover").hide();
$(".normal").mouseover(function(){
$(".normal").fadeOut(0);
$(".hover").fadeIn(1000);
});
$(".hover").mouseout(function(){
$(".normal").fadeIn(1000);
$(".hover").fadeOut(0);
});});
You can use transitions:
ADD THIS TO YOUR :HOVER
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
This adds the effect of fade IN/OUT
Addition: this will only work if you have property set for :hover, for example if you want to change the color, or background or what ever..