Does anyone know why my .cd-img-overlay class is not working when I hover over a list item?
My live code here
CSS:
#cd-team .cd-img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(92, 75, 81, 0.9);
opacity: 0;
border-radius: .25em .25em 0 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
}
HTML:
<li>
<a href="#0" data-type="member-1">
<figure>
<img src="images/bruce.jpg" alt="Team member 1" />
<div class="cd-img-overlay"><span>View Bio</span></div>
</figure>
<div class="cd-member-info">
John Smith <span>Founder & President</span>
</div>
</a>
</li>
I can't seem to get that overlay class to work like shown in this tutorial's demo when you hover over a team member: https://codyhouse.co/demo/side-team-member-bio/index.html
Hi change the opacity for the overlay to 1 and you're there. :) It's currently set to opacity: 0 for your hover class.
Do you have a hover state to change the opacity to 1? For example:
a:hover .cd-img-overlay { opacity: 1; }
add this to your code an it will work .. its just because on hover you are not changing the opacity to 1.
#cd-team li:hover .cd-img-overlay {
opacity: 1;
}
You are not changing the opacity to 1 when hovering. That's why the problem is. Use the following code that is present in the working url.
.no-touch #cd-team li:hover .cd-img-overlay { opacity: 1; }
Related
I'm very new to web dev right now, and I'm currently trying to make an image fade into color upon hovering over it. This is what I've got right now:
html:
<body>
<img src=imgmonochrome.jpg id=img1>
</body>
css:
#img1 {
position: top right;
height:49%;
width:49%;
transition: content 0.5s ease;
}
#img1:hover {
transition: content 0.5s;
content: url('imgcolor.jpg');
}
The image will switch, but will not fade in.
I've looked all over for answers on this, but I can't find any that use just HTML and CSS (cause I'm illiterate in javascript/jQuery ((but going to learn very soon for this very reason)))
Help would be appreciated.
YES, this is possible... But not in the traditional sense.
In order to accomplish this, you'll need to forgo <img />, and instead make use of two images presented with content: url() in :before and :after pseudo-classes. Set the :before to be your starting image, and :after to be your target image. Then set the opacity of :after to 0 by default, and set the two pseudo-elements to sit on top of one another. Finally, set a :hover rule for both :before and :after which toggles their opacity, and use transition: opacity to control the fade.
This can be seen in the following:
* {
margin: 0;
}
.image:before {
content: url("https://via.placeholder.com/150/FF0000/00FFFF");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:after {
position: absolute;
left: 0;
opacity: 0;
content: url("https://via.placeholder.com/150/00FFFF/FF0000");
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
}
.image:hover:after {
opacity: 1;
}
.image:hover:before {
opacity: 0;
}
<div class="image"></div>
Remove content from the transition and use img tag to set image
<img src="imgmonochrome.jpg" id="img1">
#img1 {
position: top right;
height:49%;
width:49%;
transition: 0.5s ease;
}
#img1:hover {
opacity: 0.3;
background: url(imgcolor.jpg);
}
Alternatively,
<img src="imgcolor.jpg" id="img1">
#img1 {
filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .5s ease-in-out;
}
#img1:hover {
filter: none;
-webkit-filter: grayscale(0);
}
For an website I want to show some pictures in a table, but because some of them are Stock Photos, so I need a Source. I want that the source is shown while the user hovers over the picture. So I put the source tag in a class (.PicSource) and gave it { opacity 0; transition all .2s ease-in} and while hovering on the Picture (.ServPic) .ServPic:hover + .PicSource {opacity: 1}.
But it doesn't show the source text and I don't know why. Other hover-Events work fine. I use the same thing for hiding the Caption while hovering and there is everything fine.
So here an Example Code (it should change opacity of .PicSource to 1 but it doesnt, so you may change it manually to see it)
.ServPic {
width: 350px;
height: 275px;
opacity: 0.5;
transition: opacity .2s ease-in;
}
.PicCapt {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transition: opacity .2s ease-in;
}
.PicSource {
position: absolute;
top: 0%;
left: 20%;
opacity: 0;
color : #000000;
transition: all .2s ease-in;
}
.ServPic:hover {
opacity: 1;
}
.ServPic:hover+.PicCapt {
opacity: 0;
}
.ServPic:hover+.PicSource {
opacity: 1;
}
<table>
<tr>
<td>
<div>
<img class="ServPic" src="https://cdn.lrb.co.uk/blog/wp-content/uploads/2014/03/Lorem_Ipsum.jpg">
<a class="PicCapt">CAPTION</a>
<a class="PicSource">SOURCE.COM</a>
</div>
</td>
</tr>
</table>
The "+" slector is for direct siblings. Select general siblings by using "~".
See this fiddle.
Code:
.ServPic:hover ~ .PicSource {
opacity: 1;
}
Let me just add some explanation to sibling selectors in css.
For a starter, siblings are elements that are on the exact same level in your html.
An example:
<div>
<p id="sibling1"></p>
<p id="sibling2"></p>
<a id="sibling3"></a>
</div>
<p>I am not a sibling of 1, 2 and 3.</p>
Sibling 1, 2 and 3 are all on the same level in your markup. The p-tag under your div is on the same level as the div, but not as sibling 1, 2 and 3.
Now the direct sibling of sibling1 is sibling2. The direct sibling of Sibling2 is sibling3, but not 2, that is important.
The general siblings of Sibling1 are sibling2 and sibling3.
I have 2 images on top of each other, positioned absolute, in my example they are square but in my real project they are pngs with some transparency in the borders so the one in the back needs to be hidden until it appears on hover.
My problem is I need the transition to have some kind of delay so that the back pic appears a bit before the one on top so you don't see the background in between. I have made a fiddle to illustrate this:
http://jsfiddle.net/L21sk0oh/
You can clearly see the red from the background, that shouldn't happen. Also there is some weird moving going on, I haven't noticed this in my actual project.
Also my HTML:
<div class="product1">
<img class="active" src="http://lorempixel.com/400/200/sports" alt="">
<img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>
And my css:
body{
background: red;
}
.product1{
position: relative;
width: 400px;
height: 200px;
}
img{
position: absolute;
top:0;
left:0;
}
.product1 img.active{
transition: all 1s ease-in-out;
opacity: 1;
}
.product1 img.inactive{
transition: all 1s ease-in-out;
opacity: 0;
}
.product1:hover img.active{
opacity: 0;
}
.product1:hover img.inactive{
opacity: 1;
}
You could specify a value for the transition-delay property.
In this case, I added a 1s delay to the transition shorthand of .product1 img.active:
Updated Example
.product1 img.active {
transition: all 1s 1s ease-in-out;
opacity: 1;
}
The above is equivalent to:
.product1 img.active{
transition: all 1s ease-in-out;
transition-delay: 1s;
opacity: 1;
}
Make sure you're adding the transition shorthand properties in the correct order.
I bought this template a couple of days ago and there is a hover effect which I would like to change. Right now is it like this , that you see couple of pics and if you go with your mouse over it , it will hover ( in gold and some text ) . What im trying is that I would like to change it. I would like to have it at first in this gold way and after you go with the mouse over it , it should be clear.
I'm sitting now since three days on it and I dont know what to do. There are so many script files.
<div class="portfolio-item border portrait fashion">
<div class="portfolio-item-hover">
<div class="portfolio-item-hover-info">
<hr/>
<h3>Schuppenflechten</h3>
<hr/>
</div>
</div>
</div>
here is one of the html code and on this page you can see my problem. It would be very nice if you can help me test
.portfolio-item-hover {
opacity: 0;
}
change opacity to .9 here.
and
.portfolio-item: hover {
opacity: .9;
}
chage opacity to 0 here.
It works..
In your css file fineliner.css, line 836, look for the following
.portfolio-item:hover .portfolio-item-hover {
opacity: 0.9; //change this to 0
}
.portfolio-item-hover {
background: #C5AE87;
height: 100%;
opacity: 0; //change this to 0.9
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
transition: opacity .18s ease-in-out;
-moz-transition: opacity .18s ease-in-out;
-webkit-transition: opacity .18s ease-in-out;
-o-transition: opacity .18s ease-in-out;
}
That's it
Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?
Not sure if you need any code but here's my css for the img tag:
img {
width: 600px;
height: 342px;
border-radius: 1px;
}
You can do it with
HTML
<div id="yourImage" ></div>
CSS
#yourImage {
background-image: url('image1.jpg');
}
#yourImage:hover {
background-image: url('overimage.jpg'), url('image1.jpg');
}
There is a jquery plugin for this.
The first effect is what you're looking for.
You can try this. I think it uses only CSS.
You need to check the CSS position attribute, so you can have both elements on the same place.
And then just chang the opacity of the hover image.
#Mateusz has the best answer, but I would improve upon that by adding the css transition something along the lines of this:
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
Try this:
HTML:
<div class="your-img">
<div class="your-hover"></div>
</div>
CSS:
.your-img {
width: 300px; /* your image width and height here */
height: 225px;
background-image: url('../img/image_01.png');
}
.your-hover {
width: 300px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
filter: alpha is for IE, I hope it helps.