I have a div with some text in it and "on hover", I want to display another div with some other text.
The problem is that the text from the first div comes through to the second and everything seems mingled up. I would like the second div to completely cover the first one.
Here is the jsfiddle
HTML
<div class="outer_box">
<div class="inner_box">
Main</div>
<span class="caption">Caption</span>
</div>
CSS
.outer_box {
width:100px;
height:100px;
background-color:orange;
}
.inner_box{
width:100px;
height:100px;
position:absolute;
}
.caption {
width:100px;
height:100px;
background:black;
color:rgba(255,255,255,1);
opacity:0;
}
.outer_box:hover .caption{
opacity:1;
}
Thanks!
.inner_box:hover {
opacity: 0.0;
}
You need to style the text from the first div so that it disappears on hover:
.inner_box:hover .text {
visibility:hidden;
}
Add this to your CSS:
.outer_box:hover, .inner_box:hover {
opacity:0;
}
If you will notice, I made sure to include the .outer_box:hover selector in case your intention ever was to make the outer box significantly larger than the inner box.
More useful information about the behavior of the opacity property can be found here: http://www.w3schools.com/cssref/css3_pr_opacity.asp
Related
I found this effect on material.io: https://material.io/gallery/
The Image is fixed and is overwritten by the blackish one, but the z-index must be smaller than it, because the first bg is covering it.
In my pov its only working, when another div, without any opacity, blocks the first image.
Is that somehow possiboe or are they using a different method?
Edit: This is similar to parallax but not exactly parallax. If you inspect the html,you will see that the image/svg section doesn't scroll but the text does. By giving the svg sections different z-index values this is possible. The images are different in different sections, it's just that those are not moving along with text so it appears as if the images are repeating.
I would suggest you to go through their css to get a better understanding.
This effect is called parallax effect.
You can use a library like http://materializecss.com/parallax.html
to create it or you can create your own https://www.w3schools.com/howto/howto_css_parallax.asp
the two graphic elements are position:fixed each row that contains those graphics are incrementally positioned higher in the z-index and they have overflow:hidden set
body {
margin:0;
}
section {
height:100vh; position: relative; overflow:hidden;
}
section div {
position:fixed; top:50%; left:100px; width:100px; height:100px; border:2px solid white; margin-top:-50px;
}
section.red { z-index:1; }
section.blue { z-index:2; }
.red { background:red; }
.blue { background:blue; }
<section class="red">
<div class="blue"></div>
</section>
<section class="blue">
<div class="red"></div>
</section>
simplified example code: https://codepen.io/saetia/pen/mwBypp
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
This is a slightly confusing question to ask, but interesting nonetheless.
Basically, I am working on an animated bouncer on the side of a webpage, sort of like what is found on normal music players. The animation is fine, but I want to float the animated divs to the right without floating. If the divs are floated to the right, they display how I want them. However, when the width becomes small, they append onto the same line and seem to "twitch" and disappear.
So I'm looking for a way to float these guys to the right without causing them to end up on the same line. I haven't yet been able to find anything that doesn't end up with position fixed or absolute (which does not work for the overall layout and causes a bevy of other problems).
The snippet below is with float right to show the "twitching" behavior.
#keyframes lineBounce1 {
to {
width:60%;
}
from {
width:10%;
}
}
#keyframes lineBounce2 {
to {
width:80%;
}
from {
width:30%;
}
}
.playlist{
display:inline-block;
position:absolute;
height:70%;
width:30%;
left:27%;
top:7%;
text-align:center;
min-height:300px;
min-width:400px;
background-color:white;
overflow-y:auto;
overflow-x:hidden;
}
.playhead {
height:20%;
width:100%;
}
.bounce {
height:100%;
width:20%;
float:right;
}
.lineDance1 {
display:block;
float:right;
margin-top:5px;
height:5%;
background-color:rgb(153, 000, 000);
animation-direction:alternate;
animation-duration:500ms;
animation-iteration-count:infinite;
animation-name:lineBounce1;
}
.lineDance2 {
display:block;
float:right;
margin-top:5px;
height:5%;
background-color:rgb(153, 000, 000);
animation-direction:alternate;
animation-duration:750ms;
animation-iteration-count:infinite;
animation-name:lineBounce2;
}
<span class="playlist">
<div class="playhead">
<span>
</span>
<span class="bounce">
<div class="lineDance1"></div>
<div class="lineDance2"></div>
</span>
</div>
<div id="playlist">
</div>
</span>
EDIT: Just clarifying, since I don't think I was totally clear...
I want them to begin on the right side of the playlist and "bounce" (expand) towards the left. Currently they are on the left-hand side of the span and "bounce" (expand) towards the right.
I figured out what I need to do for this!
I ended up displaying the container as a flex and aligning it to the flex end. This will yield you the desired results for anyone else with this issue.
Here is a related article on align properties.
Below is the code for a div inside a div sliding up to 50% using a css transition. I am having a problem though with my classes and id. The CSS is correct however I can not get it working, could somebody please tell me where I have gone wrong?
Thanks in advance.
CSS
<style>
.maincontentdiv {
position:relative;
height:200px;
width:200px;
background:red;
}
.slideup {
position:absolute;
bottom:0;
max-height:0;
overflow:hidden;
background:blue;
transition:max-height 250ms ease-in;
}
.maincontentdiv:hover {
max-height:50%;
}
</style>
HTML
<div class="maincontentdiv">
<div class="slideup"></div>
</div>
It works fine when I used div and div div instead of classes and id, but when I try to use classes and id it stops working so I dont think it would be the actual code :)
http://jsbin.com/slideUpUsingMinHeight/
.maincontentdiv {
position:relative;
height:200px;
width:200px;
background:red;
}
.slideup {
position:absolute;
width:100%; /* Absolute el. loose width so... */
bottom:0;
min-height:0; /* Use min- height instead */
background:blue;
transition: min-height 250ms ease-in; /* target min-height respectively */
}
.maincontentdiv:hover > .slideup { /* hover el > children selector */
min-height: 50%; /* and animate! */
}
You have to define the width&heightof the small div.The property max-height just sets a limit to the height,not defines it.
Secondly you need to hover the big div,not the small one,cause it's width and height are both 0,how can you hover it?
Demo
Hope this will do some help.;-)
Div highlighting question
I have 2 divs stacked on top of each other inside a container.
Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse
over the bottom div, the top div background changes color, and the bottom div's background
changes a different color. In the sample code I tried, mousing over the container div makes
the top turn green and the bottom turn vlueviolet. I want a mouseover on the bottom to cause
this behavior, but I want a mouseover on the top to do nothing. I feel like I could get this
done in jQuery using a parent selector or something, but it seems like I should be able to
do this in pure CSS. Thanks!
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do.
<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>
Is this what you're looking for?
div#outer:hover div#top:hover, div#bottom:hover{
background:white;
}
Alternatively, you could also use !important:
div#top:hover {
background: white !important;
}
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div.
For example look this jsFiddle: as you can see, only the bottom divs' style can change.
This code
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.
PS: Sorry for my bad English.