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
Related
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>
When I hover the service item, it does not appear above the other items. I am trying to set the z-index but it's not working. What do I next?
Here is my demo link:
http://sarower.me/projects/
Add the z-index for the parent.
.creb.animated.fadeInUp:hover {
z-index: 10;
}
You could try:
.creb:hover {
z-index: 100;
}
That will set the z-index before the animation begins.
Well you have not added any code, but it's a z-index issue so you can see below example and update or make changes to your code, hope this help.
#b1{
width:32%;
height:200px;
background:#111;
position:relative;
float:left;
transition:1s ease;
z-index:-1;
}
#b1:hover{
transform:scale(1.1,1.1);
z-index:9;
}
#b2{
width:32%;
height:200px;
background:#ff1;
position:relative;
float:left;
transition:1s ease;
z-index:-1;
}
#b2:hover{
transform:scale(1.1,1.1);
z-index:9;
}
#b3{
width:32%;
height:200px;
background:#f11;
position:relative;
float:left;
transition:1s ease;
z-index:-1;
}
#b3:hover{
transform:scale(1.1,1.1);
z-index:9;
}
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
Try this its working for me
.creb:hover {
z-index: 9999999999;
}
I have been trying to create a hover image effect in my website. I attached the script in the below link.
I can't able to set a hover image transition fade effect and 2s time delay.
Please help me.
<div class="imagecontainer">
<img class="myhoverimg" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="">
<div class="myhoveroverlay"></div></div>
<style>
.imagecontainer {
position:relative;
width:361px;
height:181px; }
.myhoverimg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.myhoveroverlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
}
.myhoveroverlay:hover{
background:url(http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg);
}
</style>
https://jsfiddle.net/nhu2wmdg/
You can use opacity attr to fade image...
.myhoveroverlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
opacity : 1;
}
.myhoveroverlay:hover{
background:url(http://css3.bradshawenterprises.com/images /Windows%20Logo.jpg);
opacity : 0.9;
}
Thanks for the help #Leo. Exactly what i was looking for.
jsfiddle.net/nhu2wmdg/1
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'm making a web app for Google Chrome (so no need for cross browser support) and I'm making an animated tutorial that will run when it first boots. I'm drawing a box on the screen by having four different div elements with -webkit-transistions for width and height properties respectively. Then I'm using javascript to add classes to these borders and make them draw on the screen. It was all working fine until I got to the border on the right-hand side. I want my borders to draw like this: left goes down, bottom goes right, right goes up and then top goes left. It all worked properly until I got to the right border. It draws from top to bottom instead of bottom to top. I tried rotating it with -webkit-transform:rotate(180deg) but that didn't really help. Here's the code:
<html>
<head>
<style>
button {
background-color:lime;
background-image:-webkit-linear-gradient(top, lime, green);
border:solid 1px 000000;
cursor:hand;
border-radius:10;
outline:none;
width:50px;
}
.left {
width:5px;
height:0%;
border-right:solid 1px 000000;
background-color:ffffff;
-webkit-transition:height 2s;
}
.bottom {
width:0%;
height:5px;
border-top:solid 1px 000000;
background-color:ffffff;
position:absolute;
left:13px;
-webkit-transition:width 2s;
}
.right {
width:5px;
height:0%;
border-right:solid 1px 000000;
background-color:ffffff;
position:absolute;
right:11px;
top:10px;
-webkit-transform:rotate(180deg);
-webkit-transition:height 2s;
}
.top {
width:0%;
height:5px;
border-bottom:solid 1px 000000;
background-color:ffffff;
position:absolute;
left:13px;
top:7px;
-webkit-transition:width 2s;
}
.leftdraw {
height:99%;
}
.bottomdraw {
width:98%;
}
.rightdraw {
height:96.5%;
}
.topdraw {
width:98%;
}
</style>
<script>
function begintut() {
document.getElementById("left").classList.add("leftdraw")
setTimeout("document.getElementById('bottom').classList.add('bottomdraw')",2000)
setTimeout("document.getElementById('right').classList.add('rightdraw')",4000)
setTimeout("document.getElementById('top').classList.add('topdraw')",6000)
}
</script>
<title>Tutorial - Inscribe</title>
</head>
<body onload="begintut()">
<div class="left" id="left"></div><div class="bottom" id="bottom"></div><div class="right" id="right"></div><div class="top" id="top"></div>
</body>
</html>
The issue lies with your initial position of the top and right divs. If you make the following changes to your right and top classes, I think you will achieve your desired effect.
.right
change top:10px; to bottom:10px;
.top
change left:13px; to right:13px;