i'm need a advice and help in my code. I want to show cart element when cart-icon is hovering. Here is my code
.cart
{position: absolute;
width: 35vw;
height: 300px;
background-color: lightblue;
top: 0;
right: 0;
z-index: 99;
opacity: 0;}
.cart-icon
{display: block;
width: 50px;
background-color: yellow;
height: 50px;
}
.cart-icon i {color:white}
.cart-icon i:hover ~ .cart {opacity:1}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart-icon">
<i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
</div>
<div class="cart">
<!--cart item-->
</div>
When i'm hovering on i element with css .cart i:hover {color:black}, it's also not working. I've spend more than 2 hours to fix this, but still getting stuck
Thank you
You would have to use :hover on .cart-icon itself. Currently your looking for a .cart element that is a sibling of the i element.
.cart
{position: absolute;
width: 35vw;
height: 300px;
background-color: lightblue;
top: 0;
right: 0;
z-index: 99;
opacity: 0;}
.cart-icon
{display: block;
width: 50px;
background-color: yellow;
height: 50px;
}
.cart-icon i {color:white}
.cart-icon:hover ~ .cart {opacity:1}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart-icon">
<i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
</div>
<div class="cart">
<!--cart item-->
</div>
Hope that will work for you!
.cart
{position: absolute;
width: 35vw;
height: 300px;
background-color: lightblue;
top: 0;
right: 0;
z-index: 99;
opacity: 0;}
.cart-icon
{display: block;
width: 50px;
background-color: yellow;
height: 50px;}
.cart-icon {color:white}
.cart-icon:hover ~ .cart {opacity:1}
There is no way for CSS to know the link between the elements so it's easier to make the items a child:
.cart-items {
width: 35vw;
height: 300px;
background-color: lightblue;
display: none;
}
.cart {
width: 50px;
background-color: yellow;
height: 50px;
}
.cart i {color:white}
.cart:hover .cart-items {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart">
<i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
<div class="cart-items">
cart items
</div>
</div>
Related
i am trying to create a CSS Animation for a vertical line going upwards - the line should be within a specific div
I have used gsap - i have used as well ypercent field, however the line starts from below the FirstScene div while i need it to be contained within the FirstScene div
gsap.fromTo(".vertical-line",{ yPercent:10 }, {yPercent:0,duration: 5});
* {
margin: 0;
padding: 0
}
.topnav {
position: sticky;
top: 0;
font-size: x-large;
background-color: black;
position: -webkit-sticky;
overflow: hidden;
z-index: 1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: right;
padding: 8px;
color: white;
display: inline;
}
linkStyle {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li i {
color: white;
text-decoration: none;
}
li a {
color: white;
text-decoration: none;
}
#li-left {
float: left;
}
body {
margin: 0px;
height: 100%;
}
.FirstScene {
background-color: black;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.line {
left: 50%;
top: 50%;
width=10px;
height: 50%;
position: absolute;
}
.vertical-line {
border-left: 6px solid blue;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<div class="topnav">
<ul>
<li id="li-left">
<Link to="/" class="linkStyle"> MINA IBRAHIM
</Link>
</li>
<li>
<a href="https://github.com/ibrahimmina">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/minasamyibrahim/">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
.email()
</li>
<li>
<Link to="/about" class="linkStyle"> .about()
</Link>
</li>
</ul>
</div>
<body>
<section class="FirstScene">
<div class="line">
<div class="vertical-line">
</div>
</div>
</section>
</body>
Please use the bellow css for the Vertical Line Going Upwards animations
.FirstScene{
background-color: black;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.vertical-line{
border-left: 6px solid blue;
animation-name: line;
animation-duration: 5s;
animation-iteration-count: 1;
left: 0;
height: 50%;
width: 10px;
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
}
#keyframes line{
0%{
height: 0px;
}
100%{
height: 50%;
}
}
I have to create a list menu that is only icons and when you hover over it, the hidden text eases out right to left. Unfortunately I don't know transitions well enough to accomplish this. What I currently have transitions out, but the whole menu comes with it. Here's a snippet of what I mean
https://codepen.io/onesneakymofo/pen/qBdxyjB
HTML:
<div class="box">
<ul>
<li>
<span class="hide-me">Users</span>
<span class="fas fa-list fa-user fa-2x fa-inverse icon"></span>
</li>
<li>
<span class="hide-me">Email</span>
<span class="fas fa-list fa-envelope fa-2x fa-inverse icon"></span>
</li>
<li>
<span class="hide-me">Settings</span>
<span class="fas fa-list fa-cog fa-2x fa-inverse icon"></span>
</li>
</ul>
</div>
CSS:
.box{
position: relative;
background: tomato;
height: 500px;
width: 500px;
}
ul {
z-index: 1;
position: absolute;
right: 10px;
}
li {
position: relative;
list-style: none;
height: 50px;
width: 50px;
padding: 5px;
right: 25px;
line-height: 0;
margin-bottom: 25px;
top: 5px;
background: #333;
border-radius: 25px;
}
.hide-me{
font-size: 26px;
opacity: 0;
}
li:hover{
top: 0px;
background-color: orange;
transition: width 1s ease-out;
width: 125px;
}
li:hover .hide-me {
opacity: 100;
transition: opacity .35s;
position: absolute;
top: 25px;
}
li:hover .icon {
position: absolute;
right: 5px;
top: 5px;
}
span {
color: #fff;
}
The closest thing that I have found to what I want is
https://stackoverflow.com/a/52211712
but when I try to make it into a list, the same thing from my snippet happens.
Thanks.
You can use ::after and position:absolute to put content behind your menu, and :hover::after to then move it out from behind. The relevant CSS is in the head of the HTML below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
li {
background-color: white;
display: inline-block;
}
li::after {
content: "12345";
position: absolute;
left: 50px;
transition: all 1s ease;
z-index: -1;
}
li:hover::after {
left: 200px;
transition: all 1s ease;
}
</style>
</head>
<body>
<ol>
<li>qwertyuiop asdf</li>
<br>
<li>qwertyuiop asdf</li>
<br>
<li>qwertyuiop asdf</li>
<br>
</ol>
</body>
</html>
I am trying to clip this strap into the parent rectangle.
Image-
HTML CODE:
<div class="pricing_plan ultimate">
<div class="strap">
<P>RECOMMENDED</P>
</div>
<div class="p_name">
<p>Ultimate</p>
</div>
<div class="p_plan">
<p><strike>₹ 2388</strike></p>
<h3>₹ 1,099</h3>
<p>Save 53%</p>
</div>
<div class="p_duration">
<p>12 Months</p>
<p>356 Days</p>
</div>
<a href="">
<button class="pricing_button ultimate">BUY</button>
</a>
</div>
CSS
.s2 .pricing_plans .ultimate .strap{
position: relative;
top: -13px;
right: 65px;
transform: rotate(-35deg);
clip-path: inset(0px 50px 50px 0px);
}
.s2 .pricing_plans .ultimate .strap p{
background-color: white;
font-size: 10px;
color: #3499E0;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
How can I clip it into the rectangle so that it doesn't flow outside.
I have tried overflow: hidden it doesn't seem to work.
What is the best method to it, so that it is best for a responsive design?
You have to use position:relative with the parent bloc, and position:absolute with the child bloc :
.bloc{
background: red;
position: relative;
overflow: hidden;
width: 200px;
height: 300px;
}
.bloc .label{
position: absolute;
top: 15px;
left: -20px;
width: 120px;
height: 20px;
background: black;
color: #fff;
text-align: center;
transform: rotate(-35deg);
}
<div class="bloc">
<div class="label">
Label here
</div>
</div>
I've been having trouble with various play button options.
This time i copied from
codepen.io/martinkrulltott/pen/xwrXwR
My version
http://www.leatherspin.com/TEST.html
Check this solution added overlay play button
.video-thumbnail {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.top-img {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.btm-img {
position: relative;
display: inline-block;
cursor: pointer;
margin: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.7);
text-align:center;
}
.top-img:hover .overlay ,.btm-img:hover .overlay {
opacity: 1;
}
.overlay i
{
color:#fff;
top: 42%;
transform: translate(-50%,0);
position: absolute;
font-size:50px;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="video-thumbnail top-img">
<img src="http://www.leatherspin.com/Girl-in-leather-gloves-with-gun-leather-jacket-overknee-leather-boots-8.jpg" alt="Video thumbnail">
<div class="overlay">
<i class="fa fa-play"></i>
</div>
</div>
<div class="video-thumbnail btm-img">
<img src="http://www.leatherspin.com/girl-with-gun-leather-gloves-leather-pants-boots-170.jpg" alt="Video thumbnail">
<div class="overlay">
<i class="fa fa-play"></i>
</div>
</div>
In image their are border that overlapped with my social icon i can't fix that
See in the pic
Border are come in background of social icons
This is my HTML
<div class="social text-center">
<p class="icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</p>
<div class="divider">
</div>
This is css
.social {
position: relative;
}
.divider {
position: absolute;
border-top: 2px solid #fff;
width: 100%;
top: 50%;
}
Please solve this problem.
Thanks in advance :)
it's very simple if you use pseudo elements
check the snippet
.social {
overflow: hidden;
background: #333;
padding: 10px 5px;
text-align: center;
}
.icons {
position: relative;
display: inline-block;
vertical-align: top;
padding: 0 10px; /* you can use this padding for the space between icons and border */
}
.icons:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
width: 9999px;
height: 1px;
background: #fff;
}
.icons:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 9999px;
height: 1px;
background: #fff;
}
<div class="social text-center">
<div class="icons">
<i class="fa fa-facebook" aria-hidden="true">123</i>
<i class="fa fa-google-plus" aria-hidden="true">123</i>
<i class="fa fa-youtube" aria-hidden="true">123</i>
<i class="fa fa-twitter" aria-hidden="true">123</i>
<i class="fa fa-instagram" aria-hidden="true">123</i>
</div>
</div>
<!-- remove "123" from icon -->
I am not sure where you want to put divider but following css will put at bottom.
.social {
position: relative;
}
.divider {
position: relative;
border-top: 2px solid #fff;
width: 100%;
}
.social {
width: 100%;
text-align: center;
}
.social h6 {
text-align: center;
font-size: 16px;
color: #a5a5a5;
font-weight: 300;
margin: 15px 0px;
display: inline-block;
position: relative;
}
.social h6:after,
.social h6:before {
content: '';
position: absolute;
width: 130px;
height: 1px;
display: block;
background-color: #a5a5a5;
}
.social h6:after {
right: 95px;
top: 12px;
}
.social h6:before {
left: 95px;
top: 12px;
}
<div class="social">
<h6>Follow Us</h6>
</div>