I'm creating some sort of slideshow. When you hover over an image the image will expand and overlap the other images. But when this happens I still want those images behind the expanded image to work when hovering over their area.
Right now it almost works perfectly, only the expanded image is flickering when you hover over it. I don't want that. How can I solve this?
DEMO
HTML:
<div id="expand">
<div class="expand_1">
<figure></figure>
</div>
<div class="expand_2">
<figure></figure>
</div>
<div class="expand_3">
<figure></figure>
</div>
<div class="expand_4">
<figure></figure>
</div>
</div>
CSS:
#expand {
height: 200px;
}
.expand_1 {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
}
.expand_1 figure {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
background: grey;
}
.expand_1 figure:hover {
width: 400px;
height: 200px;
float: left;
position: absolute;
z-index: 1;
pointer-events: none;
background: grey;
}
.expand_2 {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
}
.expand_2 figure {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
background: black;
}
.expand_2 figure:hover {
margin-left: -100px;
width: 400px;
height: 200px;
float: left;
position: absolute;
z-index: 1;
pointer-events: none;
background: black;
}
.expand_3 {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
}
.expand_3 figure {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
background: green;
}
.expand_3 figure:hover {
margin-left: -200px;
width: 400px;
height: 200px;
float: left;
position: absolute;
z-index: 1;
pointer-events: none;
background: green;
}
.expand_4 {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
}
.expand_4 figure {
width: 100px;
height: 200px;
margin: 0;
padding: 0;
float: left;
background-color: blue;
}
.expand_4 figure:hover {
margin-left: -300px;
width: 400px;
height: 200px;
float: left;
position: absolute;
z-index: 1;
pointer-events: none;
background-color: blue;
}
Working DEMO
Don't use pointer-events: none; It is causing the flickering effect. It is also not supported by old IE browsers.
Hover on div instead of figure:
.expand_1:hover figure
Related
I am trying to create half borders between DIV elements contained within a DIV element with the help of CSS using ::after. Unfortunately , this only ever renders the border on the outside of the encompassing DIV element. I would appreciate the help.
Here is my code:
HTML:
<div class="menu">
<div class="subDiv1">Foo</div>
<div class="subDiv2">Bar</div>
<div class="subDiv3">Baz</div>
</div>
CSS:
.menu {
position: relative;
display: inline-block;
float: left;
padding: 0 10px;
margin-left:auto;
margin-right:auto;
width: 75%;
height: 150px;
position: relative;
margin-top: 2%;
border-width: 1px;
border-style: thin solid;
border-color: #008040;
overflow: hidden;
box-shadow: 0 0 10px 1px #7e8083;
}
.subDiv1 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
.subDiv1::after {
content:"";
background: black;
position: absolute;
bottom: 25%;
right: 0;
height: 50%;
width: 1px;
}
.subDiv2 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
.subDiv2::after {
content:"";
background: black;
position: absolute;
bottom: 25%;
right: 0;
height: 50%;
width: 1px;
}
.subDiv3 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
https://jsfiddle.net/2yGQD/1727/
Add position:relative to your subdivs
.subDiv1 {
position:relative;
width: 20%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
Here are my box classes
.rectangle-box {
width: 200px;
height: 30px;
background: #808080;
opacity: 0.3;
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
In HTML:
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
DEMO: https://jsfiddle.net/uq6ectfc/1/
I need rectangle-red to have opacity of 1 and rectangle-box of 0.3. But it sticks to the parent opacity.
How can I fix it?
You can't the opacity cannot be greater than parent
but you can use two methods
I have used rgba rgba(0,0,0,0.0)
.rectangle-box {
width: 200px;
height: 30px;
background: rgba(128, 128, 128, 0.3);
float: right;
position: relative;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Or the second method i have used :pseudo element to add a background
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:after {
content: '';
opacity: 0.3;
background: #808080;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index:-1;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Use RGBA instead of hex. using opacity: affects child elements and rgba does not
.rectangle-box {
width: 200px;
height: 30px;
background-color: rgba(128,128,128, 0.3);
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background-color: rgba(255,71,66, 1);
float: left;
}
A better way to structure this would be to create a div that contains both boxes. This way each of the boxes opacity will not interfere with each other.
<div class="container">
<div class="rectangle-box"></div>
<div class="rectangle-red"></div>
</div>
.container{
width: 200px;
height: 30px;
float: right;
}
.rectangle-box {
width: 100%;
height: 100%;
background: #808080;
opacity: 0.3;
}
.rectangle-red {
width: 65px;
height: 100%;
background: #ff4742;
opacity: 1;
float: left;
}
you can't
All you can do is create element inside .rectangle-box absolute (my case) or relative or whatever you want with lower opacity .lower-opacityso they are siblings and not disturb each other opacity property
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.lower-opacity{
position: absolute;
opacity: 0.3;
width: 100%;
height: 100%;
background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="lower-opacity"></div>
<div class="rectangle-red"></div>
</div>
Here is a nice and neat way using pseudo elements.
With this you can as well add images and svg to each background which gives a lot of options.
If you need other elements within each box, you'll need the second inner div.
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: #808080;
opacity: 0.3;
}
.rectangle-box:after {
content: "";
top: 0;
left: 0;
width: 65px;
height: 100%;
position: absolute;
background: #ff4742;
opacity: 1;
}
<div class="rectangle-box">
</div>
I have a round div which wraps an image and two other divs. The problem is that it is shown a grey border around this div. The problem is on all browsers chrome and firefox. I have tried putting browser css-vendor-prefixes, masks but no result.
I can not use :
img {
width: 100%;
height: 100%;
border-radius: 120px;
}
because the image is not in the correct aspect-ratio. It is in 1:1. It should be on 16:9 because it is a YouTube video frame.
<div class="video_wrap">
<div class="views">1651</div>
<img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
<div class="title">o'najr</div>
</div>
.video_wrap {
width: 240px;
height: 240px;
border-radius: 120px;
overflow: hidden;
}
.views, .title {
position: relative;
background: #fff;
height: 50px;
color: #f8008c;
text-align: center;
line-height: 50px;
}
.views {
top: 0px;
z-index: 2;
}
.title {
top: -100px;
}
.video_wrap img {
height: 100%;
position: relative;
top: -50px;
}
fiddle http://jsfiddle.net/h3198LfL/
You could remove the border-radius:120px from .video_wrap and add following to your img
img{
width:100%;
border-radius: 120px;
}
SNIPPET
.video_wrap {
width: 240px;
height: 240px;
overflow: hidden;
}
img {
width: 100%;
border-radius: 120px;
}
.views,
.title {
position: relative;
background: #fff;
height: 50px;
color: #f8008c;
text-align: center;
line-height: 50px;
}
.views {
top: 0px;
z-index: 2;
}
.title {
top: -100px;
}
.video_wrap img {
height: 100%;
position: relative;
top: -50px;
}
<div class="video_wrap">
<div class="views">1651</div>
<img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
<div class="title">o'najr</div>
</div>
add the webkit code and others in video-wrap, as in:
.video_wrap {
width: 240px;
height: 240px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-ms-border-radius:120px;
-o-border-radius:120px;
border-radius: 120px;
overflow: hidden;
}
to avoid the border, you can set new line of it, as in:
.video_wrap img {
border:0px;
border:none;
}
DEMo