I have this html code :
<div class="content">
<h2>Hero</h2>
<h2>Hero</h2>
<div class ="tricky"></div>
</div>
where content is a flex container;tricky is another flex container with pseudo elements before and after that i want to use for effects when a is hover.(meaning i got .tricky::before{...} and .tricky::after{..} )
.tricky, .tricky::before, .tricky::after all of them are square width visibility: hidden.
I want when a is hover to affect all tricky's visibility to visible or any other change(ex: color/width/height anything) or one at a time(ex: .content a:hover ~.tricky:before{...})
I tried :
content a:hover ~(or + ).tricky:before { ...} ; content a :hover ~(or +)*{...} and no method works.
Any help?
Thank you.
So i have this:
I want when a is hover to affect tricky's pseudo elements like tricky::before{...} to be able to change his visibility,width,height and same for ::after.
*{
padding:0;
margin:0;
}
.content{
position:relative;
top:200px;
left:300px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
width:150px;
height:150px;
background:transparent;
overflow:hidden;
border-radius:20px;
}
.content::before{
content:"";
position:absolute;
width:100px;
height:250px;
background:linear-gradient(cyan,purple);
animation:4s borderef linear infinite;
}
.content::after{
content:"";
position:absolute;
background:linear-gradient(red,white);
inset:3px;
}
/* hero a(linkul) sta in fata, iar h2 sta in spate*/
.content a{
position:absolute;
color:red;
transform:translate(-50%,0);
-webkit-text-stroke: 1px yellow;
font-size:2.5rem;
text-decoration:none;
z-index:3;
}
.content h2:nth-child(2){
color:blue;
font-size:2.5rem;
animation:animate 4s ease-in-out infinite;
z-index:3;
}
.tricky{
position:absolute;
display:flex;
width:100px;
height:100px;
background:red;
overflow:hidden;
border-radius:20px;
align-items:center;
justify-content:center;
}
.tricky::before{
content:"";
position:absolute;
width:30px;
height:130px;
background:radial-gradient(yellow,cyan);
animation:4s borderef2 linear infinite;
border-radius:20px;
z-index:2;
visibility:hidden;
}
.tricky::after{
content:"";
position:absolute;
background:linear-gradient(yellow,white);
inset:5px;
z-index:2;
visibility:hidden;
}
#ida:hover ~ .tricky::after{
content:"";
background:black;
visibility:visible;
}
#keyframes animate {
0% ,100%
{
clip-path: polygon(0% 45% ,15% 44% ,32% 50%, 54% 60% ,70% 61% ,84% 59%, 100% 52%, 100% 100% ,0% 100%) ;
}
50% {
clip-path: polygon(0% 60% ,16% 65% ,34% 66% ,51% 62% ,67% 50%, 84% 45% ,100% 46%, 100% 100%, 0% 100%) ;
}
}
#keyframes borderef{
0% {
transform:rotate(0deg) ;
}
100%{
transform:rotate(360deg) ;
}
}
#keyframes borderef2{
0% {
transform:rotate(0deg) ;
}
100%{
transform:rotate(-360deg) ;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<link href="test.css" rel="stylesheet"/>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="content">
<h2><a id ="ida" href="#">Hero</a></h2>
<h2>Hero</h2>
<div class ="tricky">
</div>
</div>
</body>
</html>
Your question is not very clear. Are you looking for this? The ::after content will show whenever any previous sibling h2 is hovered.
h2:hover~.tricky::after {
content: "123";
}
<div class="content">
<h2>Hero</h2>
<h2>Hero</h2>
<div class="tricky"></div>
</div>
I have used onmouseover and onmouseleave event listener to track the hover and out event and added/removed the visibleAfter class which will take care of the styling of content::after in the CSS
const link = document.getElementById('link');
const tricky = document.getElementById('tricky');
link.addEventListener('mouseover', ()=>{
tricky.classList.add('visibleAfter')
})
link.addEventListener('mouseleave', ()=>{
tricky.classList.remove('visibleAfter')
})
.tricky, .tricky::before, .tricky::after {
width: 50px;
aspect-ratio: 1;
background: #777;
position:relative;
}
.tricky::before, .tricky::after{
content: '';
display:block;
position:absolute;
display:block;
visibility:hidden;
}
.tricky::before{
top:.5em;
left:.5em;
background:red;
}
.tricky::after{
top: 1em;
left:1em;
background:green;
}
.visibleAfter::after {
visibility: unset;
}
<div class="content">
<h2><a id='link' href="#">Hero</a></h2>
<h2>Hero</h2>
<div id='tricky' class="tricky"></div>
</div>
Do you want this? .tricky::after will show on h2's Hover
h2:hover~.tricky::after {
content: "123";
}
<div class="content">
<h2>Hero</h2>
<h2>Hero</h2>
<div class="tricky"></div>
</div>
Related
so i am making an advertisement, which has animations using css only(this is a requirement for the project). The problem is that I am not able to remove the elements from the screen because the display property is not animatable. I want to remove the elements from the screen because there needs to be a complete scene change 2 times, hence there will be 3 scenes. Old elements need to go away and new elements need to be shown , in a fraction of a second.
I have reached the following state using no javascript but i dont know how to make the 2 images disappear and make space for the next elements of text divs.
https://jsfiddle.net/br93px4z/1/
changes are that javascript has been completely removed
and the following css has been edited :
#keyframes scale{
0%{transform: scale(0.2);}
99.9%{transform: scale(2.3);left:280px;top:40px;}
100%{transform: scale(0.0000001);left: -4000px;top: -4000px;}
}
#keyframes topToBottom{
0%{transform: translateY(-100px);}
80%{transform: translateX(700px) translateY(100px) scale(2);left: -248px;
top: -62px;}
99%{transform: translateX(700px) translateY(100px) scale(2);left: -248px;
top: -62px;}
100%{transform: scale(0.0000001);left: -4000px;top: -4000px;}
}
here is what i want to achieve but it is achieved using javascript:
https://jsfiddle.net/t6ackzeb/4/
important javascript used(just for reading ):
logo.addEventListener("webkitAnimationEnd", postAnimation1);
logo.addEventListener("animationend", postAnimation1);
function postAnimation1() {
logo.style.display = "none";
part1.style.backgroundColor = "#d6a333";
part1.style.backgroundImage = "none";
txtAdventure.style.display="block";
}
txtAdventure.addEventListener("animationend", postAnimation2);
function postAnimation2() {
img1.style.display = "none";
img2.style.display = "none";
txtAdventure.style.display="none";
part1.style.backgroundImage="url('https://i.imgur.com/KsS80IE.png')"
txt1.style.display = "block";
txt2.style.display = "block";
txt3.style.display = "block";
endLogo.style.display = "block";
}
````````````````````````
So is there an an alternative to achieving the same results as display:none; but without using javascript ?
thank you
Found the solution thanks to https://stackoverflow.com/users/9166287/adnan-toky :
here:
https://jsfiddle.net/mnpsavkq/16/
Try the following code sample.
CSS:
.animatedDiv {
height:100px;
width:100px;
float: left;
margin:5px;
}
.d1 {
animation:hide1 10s linear 10;
background:red;
}
.d2 {
animation:hide2 10s linear 10;
background:green;
}
.d3 {
animation:hide3 10s linear 10;
background:blue;
}
#keyframes hide1{
0% {
opacity:1;
height:100px;
width:100px;
}
33% {
opacity:0;
height: 100px;
width:100px;
}
34% {
width: 0;
height: 0;
}
100% {
opacity:0;
height:0;
width:0;
}
}
#keyframes hide2{
0% {
opacity:1;
height:100px;
width:100px;
}
33% {
opacity:1;
}
66% {
opacity:0;
height: 100px;
width:100px;
}
67% {
width: 0;
height: 0;
}
100% {
opacity:0;
height:0;
width:0;
}
}
#keyframes hide3{
0% {
opacity:1;
height:100px;
width:100px;
}
66% {
opacity:1;
}
99% {
opacity:0;
height: 100px;
width:100px;
}
100% {
width: 0;
height: 0;
}
}
HTML:
<div class="animatedDiv d1"></div>
<div class="animatedDiv d2"></div>
<div class="animatedDiv d3"></div>
I'm building a site, and I have an animating image in my header. This image is a coloured bar that animates from right to left on a loop to give the impression of it infinitely moving left.
What I would like to accomplish, is to have a fade in/out effect on the left and the right side of the image, without affecting the animation of it's background image.
This is my HTML code:
<div id="hbaranim"><div id="hbarchild"></div></div>
And my current CSS (with just the animating image):
#hbaranim {
width: 100%;
height: 5px;
overflow-x: hidden;
padding-bottom: 10px;
padding-top: 10px;
}
#hbaranim #hbarchild {
position: relative;
width: 8524px;
height: 5px;
background-image: url("img/colorbartile.png");
background-repeat: repeat-x;
-webkit-animation: hbaranim_roll linear 245s infinite;
}
#-webkit-keyframes hbaranim_roll {
from { right: 0px; }
to { right: 2131px; }
}
JSFiddle
Eddit: Currently using the HTML is using two div tags, but they don't have any content in them, so using just one would probably be better (not sure how to that to be honest...)
Eddit 2: Just to clarify, the animating image is positioned over a gradient background, so just putting another gradient over the image like some of you suggested won't work in this case. It really need's to be transparent at the sides.
Eddit 3: Some of you also suggested using a CSS gradient instead of an image, but the image I use on my actual site contains some other details that would be impossible to replicate in CSS. For this example I used an image that could indeed be replicated with a CSS gradient quite easily.
Eddit 4: Updated the fiddle to include the whole header
You could use absolutely positioned pseudo elements on the parent element with gradient backgrounds to achieve this. You can also achieve the same effect with a single div.
UPDATE: Following on from edit 3 in the original question, the rainbow gradient I've used below can be replaced with an image file, the exact same principles apply.
More information on pseudo elements
More information on gradients
EXAMPLE
*{box-sizing:border:box;}
body{margin:0;}
.header{
background:radial-gradient(ellipse at center,#242424 0%,#141414 100%);
box-shadow:0px 0px 10px 3px rgba(0,0,0,.75);
height:150px;
position:relative;
}
h1{
color:#fff;
font-family:arial;
font-size:48px;
padding:25px 0 0;
margin:0;
text-align:center;
}
h2{
color:#fff;
font-family:arial;
font-size:24px;
line-height:25px;
margin:0;
text-align:center;
}
#hbaranim{
-webkit-animation:hbaranim_roll linear 10s infinite;
animation:hbaranim_roll linear 10s infinite;
background:linear-gradient(90deg,#f00 0%,#ff0 16.667%,#0f0 33.333%,#0ff 50%,#00f 66.667%,#f0f 83.333%,#f00 100%) 0 0 repeat-x;
background-size:200%;
bottom:10px;
height:5px;
position:absolute;
width:100%;
}
#hbaranim::before,#hbaranim::after{
content:"";
display:block;
height:100%;
position:absolute;
top:0;
width:25%;
z-index:1;
}
#hbaranim::before{
background:linear-gradient(90deg,rgba(20,20,20,1),rgba(20,20,20,0));
left:0;
}
#hbaranim::after{
background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,1));
right:0;
}
#-webkit-keyframes hbaranim_roll{
0%{
background-position:0 0;
}
100%{
background-position:200% 0;
}
}
#keyframes hbaranim_roll{
0%{
background-position:0 0;
}
100%{
background-position:200% 0;
}
}
<div class="header">
<h1>Name of Site</h1>
<h2>www.site.nl</h2>
<div id="hbaranim"></div>
</div>
If you're feeling adventurous, you can do this without the nested div (Fiddle) or even without the parent div (Fiddle)
The following snippet was provided as an example while awaiting Ties' confirmation that removing the child div was an option and is included below as a matter of record.
#hbaranim{
overflow:hidden;
padding:10px 0;
position:relative;
width:100%;
}
#hbaranim #hbarchild{
background-color:#000;
height:20px;
position:relative;
width:8524px;
z-index:1;
}
#hbaranim::before,#hbaranim::after{
content:"";
display:block;
height:20px;
position:absolute;
top:10px;
width:20%;
z-index:2;
}
#hbaranim::before{
background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));
left:0;
}
#hbaranim::after{
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));
right:0;
}
<div id="hbaranim">
<div id="hbarchild"></div>
</div>
I like pretty much the slow auto zoom in and out effect on that site : http://watchingtheworldcup.com/ for banner images such as the very top one.
I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc.
here is my html :
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#">
<article class="article_container">
<img class="article_image_hompage5" src="#">
<h2 class="article_title_hompage3"> a favourite thai soup</h2>
</article>
</a>
</div>
</div>
and my css for the image :
.article_image_hompage5{
width: 100%;
border-radius: 2px 2px 2px 2px;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:15px;
z-index:0;
}
Can someone help with with finding the right css settings ?
cheers,
Use css animation you can get the similar result.
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
img {
-webkit-animation: zoom 50s; /* Chrome, Safari, Opera */
animation: zoom 50s;
}
<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />
If you want to also zoom out you need to define the the milestones in your keyframes as such:
#-webkit-keyframes zoominout {
0% {
-webkit-transform: scale(1,1);
}
50% {
-webkit-transform: scale(1.5,1.5);
}
100% {
-webkit-transform: scale(1.1,1.1);
}
}
Use css transform:scale();
like:
JavaScript:
window.onload=function(){
$("#content").fadeOut(4000);
$("#background").addClass("zoom");
setTimeout(function(){
$("#background").removeClass("zoom");
},5000);
}
body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:url("http://watchingtheworldcup.com/photos/worldcup1.jpg") center center no-repeat;
background-size: 100% 100%;
display:inline-block;
z-index:2;
transition:all ease 4.1s;
/* transform:scale(1,1);*/
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:3;
background-color:rgba(0,0,0,0.5);
color:#ffffff;
font-size:50px;
}
.zoom{
transform:scale(1.2,1.2);
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="background">
</div>
<div id="content">
<center><br /><br /><br /><br /><br /><br />
Watching...
</center>
</div>
I want to make a div slide over another backward one, but no idea how to any tips?
i can make the animation but when i mouse over the animaton dont work properly, can someone explain me why?
<!DOCTYPE html>
<html>
<head>
<style>
.fundo_main {
width:200px;
height:200px;
background-color:red;
position:relative;
}
.fundo_main:hover {
width:200px;
height:200px;
-webkit-animation-name:myfirst;
position:relative;
}
.fundo {
width:200px;
height:200px;
background-color:red;
position:relative;
-webkit-animation-name:myfirst;
}
.fundo:hover {
width:200px;
height:200px;
background-color:blue;
-webkit-animation-name:myfirst;
-webkit-animation-duration:.3s;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:left;
}
#-webkit-keyframes myfirst {
0% { width:0px; }
65% { width: 150px;}
100% { width:200px; }
}
</style>
</head>
<body>
<div class="fundo_main">
<div class="fundo"></div>
</div>
</body>
</html>
I would say change this:
.fundo:hover
To this one:
.fundo_main:hover .fundo
I mean that there are two contents on the body, content left and content right, i would like to do content right as a menu panel and put a separator gif (feathered vertical line) between of them. Please tell me how can i do it ? What is the css code? Thanks.
see you can get your desired result through easy code :-
HTML
<div class="wrapper">
<div class="left">left-panel</div>
<div class="right">right-panel</div>
</div>
CSS
.wrapper {
border:1px solid red;
overflow:hidden;
width:220px
}
.left {
float:left;
width:100px;
height:280px;
background:grey;
position:relative;
}
.left:after {
position:absolute;
content:" ";
width:1px;
height:280px;
background-color: #FAFAFA;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FAFAFA));
background: -moz-linear-gradient(top, #000000 0%, #FAFAFA 100%);
right:-10px;
top:0;
}
.right {
float:right;
width:100px;
height:280px;
background:lightgrey;
}
DEMO
#vertical {
border-left:thick solid #ffff00;
}
This should work