I really need some help. I'm having difficulties with hovering a Prev button. I want this button to roll over with the animated icon. However now, it only rollovers the animated icon, not the text. Here is a screenshot of the button, HTML and CSS code below. Thank you!
Button state now
https://vimeo.com/394493039
.link2 {
color: #000;
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
.link--arrowed2 {
color: #000;
display: inline-block;
height: 2rem;
line-height: 2rem;
}
.link--arrowed2 .arrow-icon2 {
position: relative;
top: -1px;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
vertical-align: middle;
}
.link--arrowed2 .arrow-icon--circle2 {
color: #000;
-webkit-transition: stroke-dashoffset 0.3s ease;
transition: stroke-dashoffset 0.3s ease;
stroke-dasharray: 95;
stroke-dashoffset: 95;
}
.link--arrowed2:hover .arrow-icon2 {
color: #000;
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
.link--arrowed2:hover .arrow-icon--circle2 {
color: #000;
stroke-dashoffset: 0;
}
<div grid-row="" grid-pad="1.5" grid-gutter="3" class=""><div grid-col="x11" grid-pad="1.5"><small>
<a class="link link--arrowed2" href="#" rel="prev_page">
<svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
<path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
</g>
</svg></a><a class="link link--arrowed2" href="#" rel="prev_page"> Prev Project</a></small></div>
You're using too many a tags in your html. You only need one anchor tag for each link.
The result is that when you hover over any part of the link your effect will apply.
.link2 {
color: #000;
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
.link--arrowed2 {
color: #000;
display: inline-block;
height: 2rem;
line-height: 2rem;
}
.link--arrowed2 .arrow-icon2 {
position: relative;
top: -1px;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
vertical-align: middle;
}
.link--arrowed2 .arrow-icon--circle2 {
color: #000;
-webkit-transition: stroke-dashoffset 0.3s ease;
transition: stroke-dashoffset 0.3s ease;
stroke-dasharray: 95;
stroke-dashoffset: 95;
}
.link--arrowed2:hover .arrow-icon2 {
color: #000;
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
.link--arrowed2:hover .arrow-icon--circle2 {
color: #000;
stroke-dashoffset: 0;
}
<div grid-row="" grid-pad="1.5" grid-gutter="3" class="">
<div grid-col="x11" grid-pad="1.5">
<small>
<a class="link link--arrowed2" href="#" rel="prev_page">
<svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
<path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
</g>
</svg>
<span>Prev Project</span>
</a>
</small>
</div>
</div>
Related
I'm trying to get animation effect on every click on button it works well on desktop but I'm getting problem to do the same on phone. I have to click on button once and then somewhere empty to lose focus state of css then click on button again to get the animation effect.
here is code snippet.
.btn_container {
color: #35f8ff;
position: relative;
display: inline-block;
text-align: center;
margin: 2.5rem auto;
}
.prog_btn {
text-transform: uppercase;
font-size: 1.3rem;
padding: 10px 25px;
z-index: 3;
background-color: transparent;
cursor: pointer;
transition: 0.2s ease-out;
position: relative;
margin: auto;
}
.btn_container .svgStroke {
position: absolute;
z-index: 1;
width: 100%;
top: -25%;
left: 0;
}
.btn_container .svgStroke path {
stroke-dasharray: 100;
stroke-dashoffset: -800;
stroke-width: 2;
transition: all 1s ease-in-out;
stroke: #35f8ff;
}
#keyframes dash {
0% {
stroke-dasharray: 100;
stroke-width: 2;
}
50% {
stroke-width: 4;
stroke: #35f8ff;
filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
}
100% {
stroke-dashoffset: 800;
stroke-width: 2;
}
}
.prog_btn:hover+.svgStroke path {
cursor: pointer;
animation: dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prog_btn:hover {
font-size: 1.2rem;
}
.add {
display: inline-block;
margin-right: 0.75rem;
height: 1.5rem;
width: 1.5rem;
}
<div class="btn_container">
<div class="prog_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="add">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
></path>
</svg> Add 10%
</div>
<svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
stroke="white"
stroke-width="2"
></path>
</svg>
</div>
here is codepen link too.
I was hoping to be able to unset focus (ie blur) at animation end but this did not work.
Here is a slightly clumsy workaround - this snippet removes the animation when it has come to an end and sets it back when there is another touchstart. It uses style setting rather than classes.
let touchDevice = false;
const progBtn = document.querySelector('.prog_btn');
const path = document.querySelector('.prog_btn +.svgStroke path');
path.addEventListener('animationend', function() {
path.style.animation = '';
});
progBtn.addEventListener('touchstart', function() {
touchDevice = true;
path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
});
progBtn.addEventListener('mouseover', function() {
path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
});
.btn_container {
color: #35f8ff;
position: relative;
display: inline-block;
text-align: center;
margin: 2.5rem auto;
}
.prog_btn {
text-transform: uppercase;
font-size: 1.3rem;
padding: 10px 25px;
z-index: 3;
background-color: transparent;
cursor: pointer;
transition: 0.2s ease-out;
position: relative;
margin: auto;
}
.btn_container .svgStroke {
position: absolute;
z-index: 1;
width: 100%;
top: -25%;
left: 0;
}
.btn_container .svgStroke path {
stroke-dasharray: 100;
stroke-dashoffset: -800;
stroke-width: 2;
transition: all 1s ease-in-out;
stroke: #35f8ff;
}
#keyframes dash {
0% {
stroke-dasharray: 100;
stroke-width: 2;
}
50% {
stroke-width: 4;
stroke: #35f8ff;
filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
}
100% {
stroke-dashoffset: 800;
stroke-width: 2;
}
}
.prog_btn:hover+.svgStroke path {
cursor: pointer;
}
.prog_btn:hover {
font-size: 1.2rem;
}
.add {
display: inline-block;
margin-right: 0.75rem;
height: 1.5rem;
width: 1.5rem;
}
<div class="btn_container">
<div class="prog_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="add">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
></path>
</svg> Add 10%
</div>
<svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
stroke="white"
stroke-width="2"
></path>
</svg>
</div>
I have this button that has :hov animations on it:
Button without pressing it
and this is the button after pressing it, for some reason a background appears on the svg element :
Button after pressing it
css for the button idle and svg idle:
.input-accordion{
display: flex;
flex-direction: row;
align-items: center;
background-color:rgb(32, 32, 109) ;
color: white;
width: 300px;
text-align: left;
padding-left: 30px;
outline: none;
border-style: none;
border: 2px solid white;
transition: 0.3s ease;
width:400px;
}
.input-accordion img{
margin-left: 5px;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
transform: scale(90%);
transition: 0.3s ease;
}
I activate the button by adding a "open" class name to it, here is the css for activated button (and the svg):
.input-accordion.open{
background-color: rgb(136, 136, 202);
}
.input-accordion.open img{
background-color: rgb(136, 136, 202);
transform: rotate(180deg);
transition: 0.3s ease;
}
.input-accordion{
display: flex;
flex-direction: row;
align-items: center;
background-color:rgb(32, 32, 109) ;
color: white;
width: 300px;
text-align: left;
padding-left: 30px;
outline: none;
border-style: none;
border: 2px solid white;
transition: 0.3s ease;
width:400px;
}
.input-accordion.open{
background-color: rgb(136, 136, 202);
}
.input-accordion.open svg{
background-color: rgb(136, 136, 202);
transform: rotate(180deg);
transition: 0.3s ease;
}
.input-accordion svg{
margin-left: 5px;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
transform: scale(90%);
transition: 0.3s ease;
}
.input-accordion:hover{
cursor: pointer;
background-color: rgb(136, 136, 202);
transition: 0.3s ease;
}
<button class='input-accordion'>
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
</button>
<br/>
<br/>
<button class='input-accordion open'>
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
</button>
I think you need to remove background color from .input-accordion.open svg rule:
<!DOCTYPE html>
<html>
<head>
<style>
.input-accordion {
display: flex;
flex-direction: row;
align-items: center;
background-color: rgb(32, 32, 109);
color: white;
width: 300px;
text-align: left;
padding-left: 30px;
outline: none;
border-style: none;
border: 2px solid white;
transition: 0.3s ease;
width: 400px;
}
.input-accordion.open {
background-color: rgb(136, 136, 202);
}
.input-accordion.open svg {
/* background-color: rgb(136, 136, 202); <-- don't add background to svg*/
transform: rotate(180deg);
transition: 0.3s ease;
}
.input-accordion svg {
margin-left: 5px;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118deg) brightness(101%) contrast(102%);
transform: scale(90%);
transition: 0.3s ease;
}
.input-accordion:hover {
cursor: pointer;
background-color: rgb(136, 136, 202);
transition: 0.3s ease;
}
</style>
</head>
<body>
<button class="input-accordion">
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
</svg>
</button>
<br />
<button class="input-accordion open">
<h3>Bleach</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
</svg>
</button>
</body>
</html>
I'm trying to show an animation whenever the cursor both hovers & leaves an image link, but for some reason whenever my cursor leaves the image, no animation occurs:
.soc {
display: block;
font-size: 0;
list-style: none;
margin: 0;
text-align: center;
}
.soc li {
display: inline-block;
margin: 12px;
margin: 1.2rem;
}
.soc a, .soc svg {
display: block;
}
.soc a {
position: relative;
height: 50px;
height: 5.0rem;
width: 50px;
width: 5.0rem;
}
.soc svg {
height: 100%;
width: 100%;
}
.soc em {
font-size: 14px;
line-height: 1.5;
margin-top: -0.75em;
position: absolute;
text-align: center;
top: 50%;
right: 0;
bottom: 0;
left: 0;
}
.icon-twitter:hover {
border-radius: 100%;
color: #fff;
fill: #fff;
-webkit-transform: scale(1.25);
transform: scale(1.25);
-webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
transition: background-color 0.5s, transform 0.5s ease-out;
transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
.icon-twitter
{
color: #000;
fill: #000;
}
.icon-twitter:hover {
background: #00aced;
}
<ul class="soc">
<li><a href="#" class="icon-twitter" title="Twitter">
<svg viewBox="0 0 512 512">
<path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
</svg>
<!--[if lt IE 9]><em>Twitter</em><![endif]--></a></li>
</ul>
Put the transition property on the element itself, not on the hover state. Otherwise it won't affect the element when it is not hovered.
.soc {
display: block;
font-size: 0;
list-style: none;
margin: 0;
text-align: center;
}
.soc li {
display: inline-block;
margin: 12px;
margin: 1.2rem;
}
.soc a,
.soc svg {
display: block;
}
.soc a {
position: relative;
height: 50px;
height: 5.0rem;
width: 50px;
width: 5.0rem;
}
.soc svg {
height: 100%;
width: 100%;
}
.soc em {
font-size: 14px;
line-height: 1.5;
margin-top: -0.75em;
position: absolute;
text-align: center;
top: 50%;
right: 0;
bottom: 0;
left: 0;
}
.icon-twitter {
color: #000;
fill: #000;
border-radius: 100%;
transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
transition: background-color 0.5s, transform 0.5s ease-out;
transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
-webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
}
.icon-twitter:hover {
color: #fff;
fill: #fff;
-webkit-transform: scale(1.25);
transform: scale(1.25);
background: #00aced;
}
<ul class="soc">
<li>
<a href="#" class="icon-twitter" title="Twitter">
<svg viewBox="0 0 512 512">
<path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
</svg>
<!--[if lt IE 9]><em>Twitter</em><![endif]--></a>
</li>
</ul>
I have this code right here, and what I am trying to accomplish is clickable icons but it seems like the hover function I have is not allowing me to click on the icons. I have already tried z-index but that doesn't seem to work.
body {
background-image: url("background.png");
background-size: 100%;
background-repeat: no-repeat;
background-color: rgb(19,68,97)
}
h1 {
font-family: 'Libre Baskerville', serif;
font-size: 50px;
padding: 0px 0px 0px 0px;
display: inline;
}
p {
font-family: 'Quicksand', sans-serif;
font-size: 15px;
padding: 0px 0px 0px 0px;
display: inline;
}
.boxAnimation {
width: 520px;
height: 300px;
position: relative;
background: rgba(255,255,255,0.3);
display: inline-block;
margin: 0 10px;
cursor: pointer;
color: #fff;
box-shadow: inset 0 0 0 3px rgba(192,192,192,1);
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s;
z-index: 0;
margin: center;
}
svg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
svg line {
stroke-width: 6;
stroke: #fff;
fill: none;
stroke-dasharray: 250;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
z-index: 0;
}
div:hover {
background: rgba(255,255,255,0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
div:hover svg line.top {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
div:hover svg line.bottom {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
div:hover svg line.left {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
div:hover svg line.right {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
.icons {
z-index: 5;
}
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="https://use.fontawesome.com/e0037e252a.js"></script>
<body>
<center>
<div class="boxAnimation"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="1560" y2="0"/>
<line class="left" x1="0" y1="360" x2="0" y2="-720"/>
<line class="bottom" x1="520" y1="360" x2="-1040" y2="360"/>
<line class="right" x1="520" y1="0" x2="520" y2="1080"/>
</svg>
<h1>Donia Amer</h1>
<br>
<p>< insert title ></p>
<br>
<br>
<div class="icons"> <i class="fa fa-linkedin-square fa-inverse" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div>
</div>
</center>
</body>
Add position:relative to .icons The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
here is the example
body {
background-image: url("background.png");
background-size: 100%;
background-repeat: no-repeat;
background-color: rgb(19,68,97)
}
h1 {
font-family: 'Libre Baskerville', serif;
font-size: 50px;
padding: 0px 0px 0px 0px;
display: inline;
}
p {
font-family: 'Quicksand', sans-serif;
font-size: 15px;
padding: 0px 0px 0px 0px;
display: inline;
}
.boxAnimation {
width: 520px;
height: 300px;
position: relative;
background: rgba(255,255,255,0.3);
display: inline-block;
margin: 0 10px;
cursor: pointer;
color: #fff;
box-shadow: inset 0 0 0 3px rgba(192,192,192,1);
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s;
z-index: 0;
margin: center;
}
svg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
svg line {
stroke-width: 6;
stroke: #fff;
fill: none;
stroke-dasharray: 250;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
z-index: 0;
}
div:hover {
background: rgba(255,255,255,0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
div:hover svg line.top {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
div:hover svg line.bottom {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
div:hover svg line.left {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
div:hover svg line.right {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
.icons {
z-index: 5;
position:relative;
}
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="https://use.fontawesome.com/e0037e252a.js"></script>
<body>
<center>
<div class="boxAnimation"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="1560" y2="0"/>
<line class="left" x1="0" y1="360" x2="0" y2="-720"/>
<line class="bottom" x1="520" y1="360" x2="-1040" y2="360"/>
<line class="right" x1="520" y1="0" x2="520" y2="1080"/>
</svg>
<h1>Donia Amer</h1>
<br>
<p>< Developer + Algorithm Enthusiast ></p>
<br>
<br>
<div class="icons"> <i class="fa fa-linkedin-square fa-inverse" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div>
</div>
</center>
</body>
Just set the z-index property of svg to - value
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Donia Amer</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="https://use.fontawesome.com/e0037e252a.js"></script>
<style>
body {
background-image:url("background.png");
background-size: 100%;
background-repeat: no-repeat;
background-color: rgb(19,68,97)
}
h1{
font-family: 'Libre Baskerville', serif;
font-size: 50px;
padding: 0px 0px 0px 0px;
display: inline;
}
p{
font-family: 'Quicksand', sans-serif;
font-size: 15px;
padding: 0px 0px 0px 0px;
display: inline;
}
.boxAnimation {
width: 520px;
height: 300px;
position: relative;
background:rgba(255,255,255,0.3);
display: inline-block;
margin: 0 10px;
cursor: pointer;
color: #fff;
box-shadow: inset 0 0 0 3px rgba(192,192,192,1);
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s;
z-index: 0;
margin: center;
}
svg {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
svg line {
stroke-width: 6;
stroke: #fff;
fill: none;
stroke-dasharray: 250;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
z-index: 0;
}
div:hover {
background: rgba(255,255,255,0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
div:hover svg line.top {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
div:hover svg line.bottom {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
div:hover svg line.left {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
div:hover svg line.right {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
.icons{
z-index: 5;
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center>
<div class="boxAnimation">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="1560" y2="0"/>
<line class="left" x1="0" y1="360" x2="0" y2="-720"/>
<line class="bottom" x1="520" y1="360" x2="-1040" y2="360"/>
<line class="right" x1="520" y1="0" x2="520" y2="1080"/>
</svg>
<h1>Donia Amer</h1><br>
<p>< Developer + Algorithm Enthusiast ></p>
<br>
<br>
<div class="icons">
<a href="https://stackoverflow.com/questions/ask">
<i class="fa fa-linkedin-square fa-inverse" aria-hidden="true" style="font-size:45px;"></i></a>
<i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i>
<i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i>
<i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i>
</div>
</div>
</center>
</body>
</html>
The trick is add new property in your icons selector position:relative
Reminder
z-index only works on positioned elements
CSS
.icons {
z-index: 5;
position:relative;
}
DEMO
I have a problem with hiding svg element. Maybe display: none or visibility? I tried but it hasn't any results. As here (IMAGE). Please help.
This is my site with example text "KAWAŁY":
#kawaly-div {
text-align: center;
background: #fda9a9;
}
.link {
text-decoration: none;
position: relative;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
.link--kawaly {
font-family: 'Oswald', sans-serif;
font-size: 10em;
color: #e78383;
-webkit-transition: color 0s 0.5s;
transition: color 0s 0.5s;
}
.link--kawaly:hover {
color: transparent;
-webkit-transition: none;
transition: none;
}
.link--kawaly::before,
.link--kawaly::after {
content: attr(data-letters);
position: absolute;
top: 0;
left: 0;
color: #e78383;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--kawaly::before {
-webkit-clip-path: url(#cp_up);
clip-path: url(../index.html#cp_up);
}
.link--kawaly::after {
-webkit-clip-path: url(#cp_down);
clip-path: url(../index.html#cp_down);
}
.link--kawaly:hover::before,
.link--kawaly:hover::after {
color: #fff;
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
transition: color 0.5s, transform 0.5s;
}
.link--kawaly:hover::before {
-webkit-transform: translate3d(20px, 1px, 0);
transform: translate3d(20px, 1px, 0);
}
.link--kawaly:hover::after {
-webkit-transform: translate3d(-10px, -1px, 0);
transform: translate3d(-10px, -1px, 0);
}
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700' rel='stylesheet' type='text/css'>
<div id="kawaly-div">
<svg class="kawaly-tekst">
<clippath id="cp_up">
<polygon id="cp_poly_up" points="0,0 550,0 550,160" />
</clippath>
<clippath id="cp_down">
<polygon id="cp_poly_down" points="0,0 550,160 0,160" />
</clippath>
</svg>
<div class=" color-5">
<a class="link link--kawaly" href="#" data-letters="KAWAŁY">KAWAŁY</a>
</div>
</div>
Thanks in advience!
The most-often recommended way is:
<svg class="kawaly-tekst" width="0" height="0">