I'm having trouble with content wrappers as they are preventing my hover interactions from working.
The goal is to get the div with class='card' to have an interaction when the mouse goes over it.
.card {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
overflow: hidden;
}
.card>div {
height: 100%;
width: 100%;
}
.card .foreground {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(100%);
background-color: blue;
transition: .5s ease;
}
.card:hover .foreground {
transform: translateX(0);
}
<div class='card'>
<div class='foreground'> </div>
<div class='background'> </div>
</div>
All info here:
https://codepen.io/kaijinny/pen/poWezRL
Since the element with the class .section-bubble1
has a z-index: -1, it is not available for hover (because it is "under" the layer).
You need to reconsider the order of the z-index.
Related
I am trying to create a dropdown menu with secondary and tertiary sub menus. The sub menus are supposed to slide out from underneath the parent menus. The actual code has several divs nested in multiple levels.
I have added a transform of translateY(700px) to the secondary-menu element to make it slide from underneath the primary-menu. However that causes the tertiary-menu to slide over the secondary-menu and not underneath it.
If the transform is removed the tertiary-menu works fine. A z-index of -1 was provided on tertiary-menu but that does not help. I have tried other combination of z-index on secondary and tertiary menus but it does not work.
There are quite a few related questions on this site but they don't help in my case. Here is the stripped down version of code to recreate the issue:
.primary-menu {
position: relative;
margin-left: 50px;
z-index: 100;
background-color: grey;
height: 50px;
padding: 20px;
}
.primary-menu:hover~.secondary-menu {
transform: translateY(0);
visibility: visible;
height: 500px;
}
.secondary-menu:hover {
transform: translateY(0);
visibility: visible;
height: 500px;
/* actually height is not known in advance, this value is put here just for this example */
}
.secondary-menu {
position: absolute;
width: 150px;
top: 50px;
left: 50px;
background-color: red;
transform: translateY(-700px);
transition: transform 1s;
visibility: hidden;
}
.category {
padding: 20px;
position: relative;
}
.tertiary-menu {
position: absolute;
left: 100%;
visibility: hidden;
padding: 20px;
top: 0;
left: 0;
transition: left 1s;
z-index: -1;
background-color: hotpink;
}
.category:hover .tertiary-menu {
visibility: visible;
left: 100%;
}
<div class="primary-menu">Menu</div>
<div class="secondary-menu">
<div class="category">
<h4>Mobiles</h4>
<div class="tertiary-menu">
<div class="sub-category">
<h4>Smartphones</h4>
<div class="product-types">Mobile Cases, Covers</div>
<div class="product-types">Power Banks</div>
</div>
<div class="sub-category">
<h4>Feature Phones</h4>
<div class="product-types">Samsung</div>
</div>
</div>
</div>
</div>
The sandbox link is here
The 'z-index' you put in the '.tertiary-menu' is working.
The reason it doesn't seem to work is because '.tertiary-menu' is a children of '.category'.
The background of '.category' is transparent, so the '.tertiary-menu' below is visible.
Simply add the background color and height to '.category' and it will look like this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.primary-menu {
position: relative;
margin-left: 50px;
z-index: 100;
background-color: grey;
height: 50px;
padding: 20px;
}
.primary-menu:hover~.secondary-menu {
transform: translateY(0);
visibility: visible;
height: 500px;
}
.secondary-menu:hover {
transform: translateY(0);
visibility: visible;
height: 500px;
/* actually height is not known in advance, this value is put here just for this example */
}
.secondary-menu {
position: absolute;
width: 150px;
top: 50px;
left: 50px;
background-color: red;
transform: translateY(-700px);
transition: transform 1s;
visibility: hidden;
}
.category {
padding: 20px;
position: relative;
height: 100%;
background-color: blue;
}
.tertiary-menu {
position: absolute;
left: 100%;
visibility: hidden;
padding: 20px;
top: 0;
left: 0;
transition: left 1s;
z-index: -1;
background-color: hotpink;
}
.category:hover .tertiary-menu {
visibility: visible;
left: 100%;
}
<div class="primary-menu">Menu</div>
<div class="secondary-menu">
<div class="category">
<h4>Mobiles</h4>
<div class="tertiary-menu">
<div class="sub-category">
<h4>Smartphones</h4>
<div class="product-types">Mobile Cases, Covers</div>
<div class="product-types">Power Banks</div>
</div>
<div class="sub-category">
<h4>Feature Phones</h4>
<div class="product-types">Samsung</div>
</div>
</div>
</div>
</div>
Is there a way to make a text content popup box appear when mouse hovers some HTML element?
I need the overlay to fit its content, because the way it is now is cropping the text, it's getting the height of the HTML element and not the height of its content.
It only slides left, but that's okay with me. I am going to place the html element to the right of the page later on, but I need to be able to set a margin from the starting point of the popup, because it slides just next the HTML element, I'd like some space between.
This is what I have got so far:
.container {
position: absolute;
width: 40%;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.overlay:hover {
display: none;
}
.container:hover .overlay {
width: 100%;
right: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
My Text
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
How can I do that?
See if that's what you're wondering to happen :
#container {
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
}
.link {
position: relative;
display: inline-block;
}
.link .tip {
visibility: hidden;
width: 0;
height: 100px;
opacity: 0;
background-color: #008CBA;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
transition: 0.5s ease;
overflow: hidden;
margin-right: 20px;
}
.link:hover .tip {
visibility: visible;
width: 150px;
height: auto;
opacity: 1;
}
<div id="container">
<div class="link">Hover me now !
<span class="tip">
Some few text here<br><br>
Let's try something else<br><br>
And adding more info here too<br><br>
And even a bit more here also
</span>
</div>
</div>
If I move and enlarge an element using top, right, transform and width in safari it does not move smoothly on the first transition. It will transition based on the old width I assume then once it has finish it repositions the element. However transitioning back it works fine.
It's probably easier to understand by viewing it:
https://codepen.io/miketricking/pen/zZJZLR
<section class="container">
<div id="wrapper">
<div id="card">
<h3>click here</h3>
</div>
</div>
</section>
.container {
width: 550px;
height: 250px;
position: relative;
background-color: teal;
}
#wrapper {
height: 20%;
width: 20%;
top: 0;
right: 0;
position: absolute;
transition: all 1s ease;
}
#wrapper.center {
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 50%;
}
#card {
width: 100%;
height: 100%;
position: relative;
transition: all 1s ease;
}
h3 {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: red;
}
I'm really lost on this one. I can see the problem just have no idea on how to solve it.
I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself.
My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture.
I hope you can help me! Need to fix this!
Thank you in advance!
.container {
position: relative;
width: 25%;
height: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00b0f0;
opacity: 0.8;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<a href="AG2R.html">
<img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image">
</a>
<div class="overlay">
<div class="text">AG2R La Mondiale</div>
</div>
</div>
I found a relevant Stack Overflow thread where the consensus is that this is unachievable with CSS unless you want a pure black image done with filters - which aren't compatible in all browsers and would not have the sliding transition you've implemented.
So I opted to show you how this could look if you created blue overlays yourself in Photoshop as separate PNG images and transitioned with them. I created the PNG by making a layer filled with #00b0f0, set it to 80% opacity and used it as a clipping mask - essentially what your .overlay was trying to do. Here's a demo:
.container {
position: relative;
width: 25%;
height: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0.8;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay .image {
position: absolute;
bottom: 0;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
text-shadow: #000 0 1px 1px;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<a href="AG2R.html">
<img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image">
</a>
<div class="overlay">
<img src="https://i.stack.imgur.com/DwIGH.png" alt="overlay" class="image" />
<div class="text">AG2R La Mondiale</div>
</div>
</div>
So, I was trying to create flip effect with css and here I am... fiddle link: https://jsfiddle.net/Munja/db11mmut/
I have 2 sides, front and back side. Issue is, back side is hidden until front side is rotated for 180deg. I would like to avoid that and make back side partially visible during rotation of front side, in order to make fine flip effect.
Any suggestions? Thank you in advance!
Code:
.container {
position: relative;
width: 200px;
height: 200px;
}
.container:hover .el{
transform: rotateY(180deg);
}
.el {
position: relative;
display: block;
width: 100%;
height: 120%;
background: #eee;
transition: 0.6s;
transform-style: preserve-3d;
}
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightgreen;
backgace-visibility: hidden;
z-index: 2;
transform: rotateY(0deg);
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightblue;
backgace-visibility: hidden;
transform: rotateY(180deg);
}
<div class="container">
<div class="el">
<div class="front">
Front Side
</div>
<div class="back">
Back Side
</div>
</div>
</div>
you have to remove transform: rotateY(0deg); and the z-index from the front class, here is a working example
https://jsfiddle.net/db11mmut/2/