I am new to CSS-Animation, so maybe the answer for you is easy. But I couldn't find an answer here yet.
I want an Element to start an animation on hover and then never end. It's for an art project because practically it doesn't make any sense.
What I have got is: A little circle, when on hover it starts getting bigger and bigger. And I want that animation to continue endlessly (or fake it like endlessly with transition: 100000s or sth like that).
Any idea how to manage that?
What I have got is this:
.circle{
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.circle:hover{
transform: scale(8000);
}
.circle:hover{
transform: scale(8000);
}
<div class="circle"></div>
Thank you very much already.
I changed the .circle:hover to a new class called "circleAnimation". Then, I gave the circle an onmouseenter event that adds it to the class (since the JavaScript is only one line, I entered it right into value of the onmouseenter event).
This is what the result looks like:
.circle {
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.circleAnimation {
transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('circleAnimation')"></div>
Hope this helped!
I think it can help you.
.circle {
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1000s;
}
.animate {
transform: scale(8000);
}
<div class="circle" onmouseenter="event.target.classList.add('animate')"></div>
You can also use onmouseover instead of onmouseenter.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.circle{
background-color: orange;
border-radius: 10px;
width: 20px;
height: 20px;
margin-top: 10%;
margin-left: 50%;
transition: 1s;
}
</style>
</head>
<body>
<div class="circle" onmouseover="changeScale(this)"></div>
<script>
function changeScale(circle){
circle.style.transform = 'scale(80)';
}
</script>
</body>
</html>
Related
I want to place a image inside a rectangle and have the image move to the right while the rectangle is being stationary and not moving. My problem is that I cant manage to put the image inside the rectangle without the rectangle moving. I got the result I want with a specific screen size
by using margin and positioning the image but when I resize the window it will not be in the same place.
How to keep it in the image inside the rectangle at the same place?
body {
margin: 0px;
}
.top-shelf {
height: 5vh;
width: 100vw;
background-color: rgb(40, 121, 197);
opacity: 50%;
}
.logo-outline {
border-radius: 35px;
border: 5px solid rgba(4, 22, 29, 0.137);
width: 130px;
height: 130;
margin-top: 1%;
margin-left: 3%;
padding: 30px;
}
.rotate-logo{
position: absolute;
top: 7%;
left: 3%;
transition: all 4s;
-webkit-transition: all 4s;
transform: translate(130px, 0);
-webkit-transform: translate(130px,0);
background-image: url('owl-logo.png');
}
.text-heading{
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cool Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-shelf"></div>
<div class="logo-outline">
<img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" class="rotate-logo" width="70" height="70">
</div>
<div class="text-heading">
<h1 style="font-family: courier;">Cool title</h1>
</div>
</body>
</html>
strong text
One thing you could try is just letting the image stay in the div, letting it flow on the page as it normally would. If the image is just in the div, it should automatically be sized to fit its contents. You could then affect the position of the image using CSS properties like margin or transform.
#logo-outline {
border-radius: 35px;
border: 5px solid rgba(4, 22, 29, 0.137);
width: 130px;
padding: 2px;
}
#rotate-logo {
height: 70px;
transition: transform ease 100ms;
}
#logo-outline:hover #rotate-logo {
transform: translateX(60px); /* 130px - 70px width */
}
<div id="logo-outline">
<img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" id="rotate-logo">
</div>
I am very new to coding so I am sorry if this is a simple question. I am trying to fade out the background while fading in the text using hover states.
This code works, however, I cannot seem to figure out why the hover state extends past the red square. I would like the hover state to only work when you mouse over the red square.
.relative{
position: relative;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
I think the reason is that the relative class is not the same size as the background, to fix this, add
height: 100px;
width: 100px;
to the relative as well.
Full code below
<DOCTYPE! html>
<html>
<head>
<style>
.relative{
position: relative;
height: 100px;
width: 100px;
}
.background {
background-color: red;
height: 100px;
width: 100px;
}
.text {
position: absolute;
top:0;
}
.relative .text{
transition: 1s;
color: transparent;
}
.relative:hover .text{
color: lightseagreen;
}
.relative:hover .background{
background: black;
transition: 1s;
}
</style>
</head>
<body>
<div class="relative">
<div class="background"></div>
<div class="text">Hello</div>
</div>
</body>
</html>
I'm sure this is an easy fix but I am new to HTML/CSS - I want a piece of text in a div to slide over another div which contains an image as well as text. Currently the slider div is not covering the entire div as the background text is preventing it from doing that. How do I make it completely overlap?
Here is my code:
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br> I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider"> Sliding info. </div>
</div>
Add this to your .items-tall-slider:
position:absolute;
top:0;
and this for positioning:
.row {
position:relative;
}
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
position:absolute;
top:0;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
.row {
position:relative;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br>
I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider">
Sliding info.
</div>
</div>
</div>
You also missed one </div> closing tag. I've added that in this example.
In your example the easiest solution would be to add position: absolute; top: 0 to the .items-tall-slider. This has the potential undesired side effect though, that the slider doesn't take any space anymore. Therefore any other elements in your page could be overlapped by your slider as well.
If you don't want this side effect, you could add a negative margin to your slider like this (or in the example below) and therfore overlap your text:
.items-tall-slider {
margin-top: -40px;
}
.items-tall-slider {
margin-top: -40px;
}
.items-tall {
background-color: #F473FF;
height: 450px;
overflow: hidden;
}
.items-tall-slider {
background-color: black;
height: 450px;
width: 100%;
margin-left: -100%;
transition: 0.5s;
color: white;
font-size: 60px;
text-align: center;
line-height: 450px;
}
.items-tall:hover .items-tall-slider {
margin-left: 0%;
transition: 0.5s;
}
<div class="row">
<div class="col-4 col-m-6 items-tall">
This is my title.<br> I currently want all this text behind the slider. Hover over this.
<div class="items-tall-slider"> Sliding info. </div>
</div>
http://jsfiddle.net/kscjq0y0/
I want to animate the movement of the yellow div when the red one disappears.
I know it can be done with jQuery animate but I want a CSS3 solution (even if it's not fully supported by all modern browsers).
I've tried the CSS transition property but doesn't seem to work for this kind of movement.
It's there a way to do this?
Make it shrink
div {
height: 100px;
width: 300px;
background-color: red;
margin: 20px;
padding: 10px;
}
#bottom {
background-color: yellow !important;
transition: all 0.5s ease;
}
#top {
transition: all 2s;
}
body:hover #top {
height: 0px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
<div id="top"></div>
<div id="bottom"></div>
You can do this, by modifying the CSS attribute that you want to animate. Currently the positioning is based on block layout with the other div, and this is not animating. But if you update the CSS position yourself, then that transition will animate. See the below example.
window.setTimeout(function () {
$("#top").fadeOut("slow");
$("#bottom").css({ top: '0px' });
}, 1000);
div {
height: 100px;
width: 300px;
background-color: red;
margin: 20px;
padding: 10px;
}
#bottom {
position: absolute;
top: 140px;
background-color: yellow !important;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="bottom"></div>
I am currently trying to learn CSS3 techniques to implement on my website. I found this code online for sliding image boxes (http://www.pixelforlife.com/html-css3-sliding-image-boxes/). When you hover over the boxes, its supposed to move upwards revealing the text hidden behind it. The problem is when I run it on chrome, firefox or IE the smooth transition effect doesn't work. I tried to change the webkit values and stuff but still couldn't get it to work. Any help would be greatly appreciated.
Thanks
<!doctype html>
<html lang="en">
<head>
<title> www.PixelForLife.com - Sliding Block </title>
<style type="text/css">
body { font: 13px sans-serif; }
#montage-wrap { width: 820px; height: 200px; }
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child { margin: 0; } /* removes margin on last block */
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("pixelforlife_thumb.png") no-repeat;
-webkit-transition: top .3s ease-in-out; }
.montage-block:hover #block1 { top: -150px; }
.thumb_content { padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div id="montage-wrap">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
<!-- A sample Block -->
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
</div> <!-- montage wrap -->
</body>
</html>
i changed the css position: top to margin:top
Its worked for me
#block1 {
width: 200px;
height: 200px;
position: absolute;
transition: all 0.5s ease-in-out;
}
.montage-block:hover #block1 {
margin-top: -100px;
}
Demo
probably this is the one you wanted
DEMO HERE
#block1 {
background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 200px;
position: absolute;
top: 0;
transition-delay: 0.5s;
transition-duration: 1.5s;
transition-property: top;
width: 200px;
}
and on hover
#block1:hover {
top: -150px ;
}
don't use same id on same page. an ID is unique per page.
You have 2 span with the same id :
<span id="block1"></span>
Change id="block1" to class="block1" and don't forget to change it in your css too.