I'm doing a React & Sass tutorial and the last image on the slider/carousel disappears whenever I hover on an image.
The issue seems to stem from position: absolutein &:hover. If I remove this, the last image appears whenever I hover on an image. I need to include this line so that the hover appears at the correct position.
The .scss for the slider:
.list {
width: 100%;
margin-top: 10px;
.listTitle {
color: white;
font-size: 20px;
font-weight: 500;
margin-left: 50px;
}
.wrapper {
position: relative;
.sliderArrow {
width: 50px;
height: 100%;
background-color: rgb(22, 22, 22, 0.5);
color: white;
position: absolute;
z-index: 99;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.container {
margin-left: 50px;
display: flex;
margin-top: 10px;
width: max-content;
transform: translateX(0px);
transition: all 1s ease;
}
}
}
The .scss for the individual items within the slider:
.listItem {
width: 225px;
height: 120px;
background-color: var(--main-color);
margin-right: 5px;
cursor: pointer;
color: white;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover{
width: 325px;
height: 300px;
position: absolute;
top: -150px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
border-radius: 5px;
img {
height: 140px;
}
}
}
Screenshots:
Try to use margin properties to set image to proper position coz position:Absolute will shift the image to move according to the page and top : 150px makes the image move beneath the main image(Cover Image)
I just realized what's going on. When I hover, the item that is being hovered is taken out of the list and the rest of the items are pushed inwards, it wasn't actually missing. It would have been more obvious had I used different images for each item.
Related
I want to position a custom button element under it's sibling, so that the sibling's shadow effect will be visible on button. Currently the shadow isn't visible on button, but under it. See code snipped to better understand what I mean by that:
.parent {
position: absolute;
}
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
z-index: 10;
}
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: 1;
}
<div class="parent">
<div class="box"></div>
<div class="button">x</div>
</div>
Apply position: relative; to .box so that it will support the z-index value without effecting the layout.
.box {
width: 200px;
height: 40px;
background-color: white;
box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 10;
}
Another option is to change z-index of .button to -1. But it may have other effects in the layout since the element will be positioned behind all other elements.
.button {
height: 20px;
width: 20px;
background-color: white;
text-align: center;
position: absolute;
right: -20px;
top: 10px;
z-index: -1;
}
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
I am trying to use a background image on an li-element to indicate the current tab being selected. The image is meant to overlap the li-element to show half-borders on top and bottom of the li-element and these borders turning up and down at the side of the tab panel.
The problem is that the image does not show up, even though it is clearly being found (according to the dev tool). If I set a background color or a frame around the div containing the background, that shows correctly and with the right dimensions. Here is my current code:
<ul class="ulTabSelect">
<li>Character<div class="tabLiBG"></div></li>
<li>Skills<div class="tabLiBG"></div></li>
<li>Equipment<div class="tabLiBG"></div></li>
</ul>
And the css:
ul.ulTabSelect {
font: 16px Verdana,sans-serif;
left: 0;
margin-top: 200px;
top: 550px;
width: 135px;
}
ul.ulTabSelect a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
color: #9F9270;
display: block;
font: bold 1em sans-serif;
padding: 5px 10px;
text-align: right;
text-decoration: none;
}
ul.ulTabSelect a:hover {
color: #FFFFCC;
}
ul.ulTabSelect li {
position: relative;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 0.1em solid rgba(0, 0, 0, 0.9);
margin-bottom: 2px;
}
.ui-state-active .tabLiBG {
position: absolute;
display: block;
top: -36px;
left: 110px;
width: 45px;
height: 84px;
background-image: url("/img/liSelect.png");
background-repeat: no-repeat;
background-position: 90px -27px;
background-color: transparent;
opacity: 1.0;
z-index: 3;
}
.tabLiBG {
display: none;
}
You can also see this in action at www.esobuild.com where it is the main tab selector to the left. Kinda run out of ideas here what to try to get it working.
It works ok if you set
background-position: -17px 11px;
or some value around that
I couldn't find the class ui-state-active in your html. That could be the issue.
Here's my fiddle.
Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How can I fix this?
.box {
float: left;
width: 200px;
height: 200px;
color: #fff;
background-color: lightblue;
position: relative;
}
.big-box {
float: left;
position: relative;
}
.big-box:after {
content: "";
box-shadow: inset 0px 0px 10px 0px #000;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
width: 100%;
height: 100%;
}
.box:hover {
background-color: green;
}
.big-box:after{
pointer-events: none;
}
https://jsfiddle.net/tm9pzudy/1/