I want to hover over a image to animate and display a block of text using CSS. The problem is that I can only seem to animate child elements.
<div id="does-not-work">
<p>DOES NOT WORK</p>
<p>Hover over the image</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/>
<p class="show-bubble">Should display this text</p>
</div>
#does-not-work img:hover .show-bubble{
max-height: 200px;
}
My expectation is that I hover over the img element inside the #does-not-work div and it shoud change the max height of .show-bubble. But it doesn't.
Using a html construction like this does work though:
<div id="does-work">
<p>DOES WORK</p>
<p>Hover over the image</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/>
<p class="show-bubble">Should display this text</p>
</div>
#does-work:hover .show-bubble{
max-height: 200px;
}
This is because the hover is now on the parent element of the block I want to show. The problem is that I only want to trigger the animate effect when a user hovers over the image, and not the whole block
https://plnkr.co/edit/4qbwdGkW9l5P6WvvtTsP?p=preview
This is because you have .hover for parent element and img tag together. So both the hover triggers at same time
Remove this code
#does-not-work img:hover .show-bubble{
max-height: 200px;
}
#does-work:hover .show-bubble{
max-height: 200px;
}
And add this code
#does-not-work img:hover ~ .show-bubble{
max-height: 200px;
}
try this
#does-not-work img:hover + .show-bubble{
max-height: 200px;
}
Or
#does-not-work img:hover ~ .show-bubble{
max-height: 200px;
}
In order to make the hover work you need to change your code to the following:
#does-not-work img:hover + .show-bubble{
max-height: 200px;
}
and the hover will fire when you hover over the image as opposed to the div.
The plus (+) operator in CSS is the adjacent sibling selector. It will select the element after the image which is what you want.
Related
I want to create a black transparent overlay on 4 images, keeping the size and if possible add some text with the hover. I've looked preview answers but it doesn't work for me. Begginer. Could you help me ?
HTML
<section class="image">
<img src="images/JOHN.jpg" alt="john" id="John" >
<img src="images/CITIES.jpg" alt="cities" id="Cities">
<img src="images/HOMIES.jpg" alt="homies" id="Homies">
<img src="images/HASARD1.jpg" alt="hasard" "Hasard">
</section>
CSS
img {
width: 47%;
height: auto;
}
#John:hover {
background: black;
;
opacity: 0.7;
/* i also tried */
background: rgba(0, 0, 0, 0.7))
/* the only thing that works on it is the opacity */
}
section.image {
text-align: center;
}
Thank you
The background you are trying to apply will not appear on the <img> tags because your image is blocking it out.
Think of your <img> tag as a layered element, the top is your actual picture, and below it is the container where the background is set. Since your image fills up the entire container, your background will never appear.
What you want to do instead is create an element that appears on-top of your image, and appears upon hover.
In order to do this, you need to first wrap your <img> tags with an element, like this:
<a href="#" class="img-link">
<img class="image" src="http://placehold.it/350x150" />
</a>
I used an <a> tag because I'm assuming you want something clickable.
Next we can apply some basic styling that inserts an element after the <a> tag, and makes it appears upon hover. The result is something like this:
.img-link {
display: inline-block;
line-height: 0;
position: relative;
}
.img-link:after {
background: rgba(0,0,0,0.3);
display: inline-block;
content: '';
height: 100%;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
transition: opacity 0.2s linear;
}
.img-link:hover:after {
opacity: 1; /* show overlay */
}
<a href="#" class="img-link">
<img class="image" src="http://placehold.it/350x150" />
</a>
A quick google of "CSS image caption hover" reveals a lot of links which you'll find useful :) Take this for example: http://demo.hongkiat.com/css3-image-captions/index.html
Basically you cannot just do it with an img. You need some additional HTML around it to create the black background. For example, here's a very basic jsfiddle: https://jsfiddle.net/outfg5ym/
Notice how I've wrapped my img inside a div:
<div class="black">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg">
</div>
The div creates a black background behind the image, and then when hovering over the div, the opacity of the image is dropped back.
You may add a filter to image to achieve similar effect.
Something like this:
img:hover {
-webkit-filter:brightness(70%);
filter:brightness(70%);
}
Example: https://jsfiddle.net/d6tce9g8/1/
Also, there are a lot of filters available: https://developer.mozilla.org/en/docs/Web/CSS/filter
Browser support of filter: http://caniuse.com/#search=filter
I am trying to position a child DIV at the bottom of a parent DIV, but I would also like the contents of the child DIV to help dictate the dimensions of the parent DIV. As I have it right now, the child DIV doesn't affect the width/height of the parent DIV.
Here is a sample of my HTML/CSS code:
//HTML code:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child"></div>
</div>
//CSS code:
#parent {
background-color:#222;
position: relative;
height: 500px;
}
#child {
background-color:#444;
position: absolute;
bottom: 0px;
width: 100px;
height: 200px;
}
What do I need to do it achieve what I am trying to do? I could forgo the absolute/relative CSS rules and simply create a table within the parent DIV which would allow me to achieve both bottom alignment and content that dictates the parent's dimensions.
However, I'd like to know if there a way to do this in CSS and without having to set the width of the parent DIV.
thanks in advance!
The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.
Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.
As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.
With modern CSS, this is doable.
HTML:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child">
<p>CHILD ELEMENT</p>
</div>
</div>
CSS:
#parent {
background:red;
height: 500px;
position:relative;
}
#child {
background:green;
position: absolute;
top:100%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
width: 100px;
}
http://jsfiddle.net/Bushwazi/bpe5s6x3/
transform:translateY(-100%); is the trick. It's math is based on the element's box-model.
You could also combine top:50%; with transform:translateY(-50%); to center it.
You can swap top for left and translateY for translateX to position the element horizontally.
Here you go
HTML:
<main id="parent">
<div class="popup">Top Aligned Title
<div class="content">
Content
</div>
</div>
</main>
CSS:
#parent {
width: 120px;
}
.popup {
position: relative;
margin-top: 48px;
}
.content {
left: 0;
position: absolute;
background: green;
width: 100%;
}
http://jsfiddle.net/8L9votay/
You can play around with flex and zero-width/height.
I've recently come up with the following solution (for width):
#parent {
display: inline-flex;
flex-direction: column;
background: #518cff;
color: #fff;
}
#child-wrapper {
height: 0; /* This can also be max-height, but height is just enough */
}
#child {
transform: translateY(-100%); /* If you need to align child to the bottom */
background: #b40000;
color: #fff;
}
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child-wrapper"> <!-- This is the solution -->
<div id="child">
Child's content that is longer than parent's
</div>
</div>
</div>
I would like to make a div child element as overlay for all the parent content,with parent width fixed. (an example could be the js captions you see on photo galleries usually)
HTML:
<div class="parent">
<div class="child">child</div>
<div class="overlay">overlay them</div>
</div>
CSS:
.parent{
width:300px;
max-width:300px;
}
.child{
width:100%;
min-width:100%;
position:relative;
}
.overlay{
position: /*?? to make it cover like overlay all the .child so all the .parent content*/
}
jsfiddle: http://jsfiddle.net/ttUgM/1/
Try giving the .parent a position:relative and the .overlay a position:absolute this will allow you to position the .overlay relative to the .parent. Is that what you want?
Why when I want to resize div, image in div doesn't change its size !? It's CASCADE style sheets, isn't it?
--EDIT--
.box{padding:0px;margin-left:10px;display:inline-block;margin-right:auto;width:20px;height:20px;border:1px solid red;}
<div class="box">
<img src="larrow.gif"/>
</div>
It's cascade, but width and height are not inherited.
You might want to do something to make the image follow the size of its parent.
Like
div.box img { width: 100%; height: 100%; }
<img> tags have an implicit width of either the image's natural width or the width attribute of the tag that must be overriden with css. Try this to make the image 100% of the width of its parent <div>:
div img{
width: 100%;
}
I think you have a bit of a misunderstanding of what cascading actually is. I'd recommend reading the part of the spec that deals with the cascade.
Your style selector only matches elements with the class box. The div has that class, but the img doesn't. Thus, the div has the style applied and the img doesn't. Try:
.box
{
padding:0px;
margin-left:10px;
display:inline-block;
margin-right:auto;
border:1px solid red;
}
.box, .box img
{
width:20px;
height:20px;
}
<div class="box">
<img src="larrow.gif"/>
</div>
I want apply opacity for parent but I do not want the child element to inherit this opacity.
<div class="parent">
<div class="child"></div>
</div>
.parent {
opacity: 0.6;
}
Is there a way to "cancel" the inherited opacity? maybe force it to opacity=1for the child element?
The opacity of the child will always be the opacity of the parent if the opacity of the child is 1.
This is not a problem with inheritance, but rather with the way opacity is calculated.
For instance,
<div id="parent">
<div></div>
</div>
<div id="original">
</div>
<div id="quarter">
</div>
#parent div, #quarter {
width: 100px;
height: 100px;
background-color: orange;
}
#parent div {
opacity: 0.5;
}
#parent {
opacity: 0.5;
}
#quarter {
opacity: 0.25;
}
#quarter's opacity, from your perspective, is the same as that of #parent div, but in actual fact, #parent div has twice the opacity of #quarter. See this jsfiddle for more detail: http://jsfiddle.net/HUaNm/
The only way to avoid this is to move the child out of the parent. Alternatively, depending on what you want here, you can also use rgba colors for the background/border/font color of the parent instead of opacity, but the effect is not the same as applying opacity.
if you have parent background color - use RGBA,
if you have parent image - use additional RGBA layer between parent and child divs playing with css position.