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.
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
I'm trying to have a word like "hello" then when you click on it, it fades out and a new word fades in.
Is there any way to do this only using HTML and CSS? If not, I guess I'm going to have to learn javascript and/or jquery.
You can play with selector and html elements trying to achieve wat you want, this is what i made.
I used css pseudo-classes ( here you can find a list of pseudo-classes with relative explanation )
the pseudo-classes are used for detect special states of the elements, like the :hover ( i think the most used ) pseudo-class that detects when the mouse is hover an element.
in this case i used
:focus: That selects the element that has the focus ( like when you click a link, in the moment that you click the link it get the focus same thing when you click and input, so if you click the input it gets the focus.)
:visited: Is used for detect the visited links, unfortunatelly this selector has a special behaviour becouse it can be used for violate the user privacy, so you cannot correctly styles othe elements based on the links that has been visited ( that is what i tried to do here )
<a href="#" id="first">
hello
</a>
<a href="#" id="second">
hello
</a>
<style type="text/css">
#first{
text-decoration: none;
color: black;
opacity: 1;
outline: none;
transition: opacity 1s;
}
#first:visited{
opacity: 0;
}
#first:focus{
opacity: 0;
}
#second:focus{
outline:none
}
#second{
opacity: 0;
text-decoration: none;
color: black;
transition: opacity 1s;
}
#first:focus + #second{
opacity: 1;
}
#first:visited ~ #second{
opacity: 1;
}
</style>
Unfortunatelly as this when the user click another element the previous text comes back
Using transition can solve your problem. This may help you.
By the way, learning JS could be a real asset for web dev ;)
Do You mean something like this?
<span>Hello</span> <span>World</span>
<style>
span { transition: opacity 1s ease; }
span + span,
span:first-child:active { opacity: 0; }
span:first-child:active + span { opacity: 1; }
</style>
Updated according to comment:
<span>Hello</span> <span>World</span>
<style>
span { transition: opacity 1s ease; position: absolute; top: 0; left: 0 }
span + span,
span:first-child:active { opacity: 0; }
span:first-child:active + span { opacity: 1; }
span + span { pointer-events: none; }
</style>
https://codepen.io/Patu/pen/RwNZOoM
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; }
I have some divs that appear when you hover an image. However, I want to have a transition rather than the images appearing so abruptly. I'm trying to avoid javascript if possible.
img {
display: none
}
p.one:hover + img {
display: block;
}
p.two:hover img {
display: block;
}
http://jsfiddle.net/nmeyf03r/56/
Transitions don't work with display: none. You can't fade in an element that's been removed from the page. Similarly, you can't fade out a display: block element. With display, the element is either in or out.
However, you can still transition your divs with CSS using the visibility, opacity and height properties.
HTML
<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
<img src="http://www.placecage.com/100/100">
<p class="two">HOVER OVER ME -IMG IS CHILD</p>
<img src="http://www.placecage.com/100/100">
CSS
img {
visibility: hidden;
opacity: 0;
height: 0;
transition: height .5s linear, opacity .5s linear;
}
p.one:hover + img {
visibility: visible;
opacity: 1;
height: 100px;
transition-delay: 0s;
}
p.two:hover + img {
visibility: visible;
opacity: 1;
height: 100px;
transition-delay: 0s;
}
Here's your demo, updated with the code above:
http://jsfiddle.net/nmeyf03r/58/
I want to apply opacity: 1; to a Paragraph when hovering over itself (I have figured that out) and when I hover the header above it.
This is my CSS
.testH {
font-family: impact;
text-align: center;
font-size: 50px;
transition: all 1s;
}
.testP {
text-align: center;
opacity: 0.5;
font-size: 18px;
transition: all 1s;
}
#testHdiv:hover {
opacity: 1;
}
.testP:hover {
opacity: 1;
}
My HTML
<div id="testHdiv"><h1 class="testH"><b>< ></b></h1>
<p class="testP">Text and text, more text<br>Bla bla bla bla</p>
</div>
So, as you can see I try to get the opacity from the paragraphs current 0.5, to 1 when hovering the Div - my idea is: being able to hover a "box"/the div, and the text becomming less transparent. Though I think the opacity on the hover of the Div does not Work as the div is defined a Div, not text, and therefor can't be transparent?
I have been struggling with this for a while now. But I am basically wanting something like this: http://demo.web3canvas.com/themeforest/flathost/onepage/index.html#testimonials, where you hover within range of the text and it is being zoomed - in this case, just with opacity.
You can set a class to the <p> or just, use an operator to set the :hover to paragraph.
Example:
#testHdiv:hover > p {
opacity: 1;
}
http://jsfiddle.net/g97pusex/1/
Just change this:
#testHdiv:hover {
opacity: 1;
}
To be like that:
#testHdiv:hover p{
opacity: 1;
}
You'll want to apply the opacity to the p element, not the div. According to your provided style, you can change it to this:
.testH {
font-family: impact;
text-align: center;
font-size: 50px;
transition: all 1s;
}
.testP {
text-align: center;
opacity: 0.5;
font-size: 18px;
transition: all 1s;
}
#testHdiv:hover .testH {
opacity: 1;
}
#testHdiv:hover .testP {
opacity: 1;
}
Notice how the :hover selector is applied to the div, but the style is applied to the p element .testP
If you are trying to hover the div and on hover it affect the paragraph opacity change your CSS to:
#testHdiv:hover .testP{
opacity: 1;
}
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