Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I've been looking online for this kind of effect for long time without having success.
It looks like there is a js script that changes dynamically the css -webkit-transform: rotateY(deg) property.
Is there anything online that does the same thing?
I hope somebody can share a similar script thanks.
If there is enough space it shows the boxes with no rotation:
If there isn't enough space the script changes the rotation and get them closer to each other:
Your example looks like a y-rotation. Heres a basic snippet of it.
body {
display: flex;
}
div {
width: 150px;
height: 150px;
background: url('https://picsum.photos/200?random');
transition-duration: .35s;
box-shadow: -3px 3px 3px #000;
}
div:hover {
transform: rotateY(70deg);
transition-duration: .35s;
}
<div></div>
<div></div>
<div></div>
If you're looking for a library that can rotate or animate HTML Elements you can use animate.css. It's easy to use !!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
There is this cool effect I came across online:
https://www.bnkle.com/
When you click the search bar a red line appears just under it making it look modern, sleek, etc.
How can I achieve this effect with pure css / js?
Try
.box { transition: 1s; outline: none; border: 1px solid #ddd }
.box:focus { border-bottom-color: red; }
<input class="box">
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm working on my homework which is creating a simple web page with html, css and javascript. i was practicing on animating things with css, which I've found something cool on this link which it's making something move behind the image.
Here's the thing it's moving behind Team Logo
Now I've tried to use the source page to find out how they managed to animate it, but still got no luck to understand it Since I'm still learning. is there any example base on what I've explained?
I did it based on this answer. That's why I flagged your question as duplicate. It was cool and I couldn't resist doing it.
.hi {
width: 84px;
height: 84px;
background-image: url("https://thunderpick.com/assets/img/bolt/bolt.png");
position: relative;
border: solid 1px black;
animation: playv 1s steps(21) infinite, playh 0.0476s steps(3) infinite;
}
#keyframes playv {
0% {
background-position-y: 0px;
}
100% {
background-position-y: -1764px;
}
}
#keyframes playh {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -252px;
}
}
<div style="background-color: black; width: 86px">
<div class='hi'>
</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I currently have a div that is displaying a chart. In my HTML page, I have given it the ID of "main". In my CSS, I am trying to bring the chart a bit more up in the page, however, have had issues. I currently have a border, and am trying to bring the chart up to the border. In other words, I won't want any padding/space between the div and the top of the border. This is how it looks like right now:
And here is how my CSS code looks like right now:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
}
Any help would be appreciated. Thanks!
Try applying negative marging or negative top to your chart container...
Ex:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
top:-20px
}
or
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
margin-top:-20px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Hello Everyone!
I am designing a website for myself and I am making this sick front page but I need to know how to make it work.
From this when it's normal:
http://i.stack.imgur.com/QM0c0.png (Copy and paste in a different browser, I cannot post direct images)
And this would be how it'd look when you hover over it, the background would fade black and the image would pop out with a bigger size:
http://i.stack.imgur.com/dsvmu.png
Anyone knows how to do this?
Kind Regards!
You will need to make 2 divs
'Div1 Small Button' and
'Div2 Big Button'
Then you will need to make them showing and hiding with jQuery.
And make it like: if hover that button then show Div2 Big Button else hide.
This is how you do it with pure CSS. Best way is to use the :hover property.
HTML:
<img src="http://i.stack.imgur.com/dsvmu.png"/>
CSS:
img{
height:200px;
width:200px;
}
img:hover{
width:400px; /*OR transform: scale(1.5)*/
box-shadow: 10px 10px 5px #888888;
}
Fiddle here. Hover over the image to see the effect.
Also if you want the background to be colored as in your image then wrap the image inside a div. And use the following css:
<div><img src="http://i.stack.imgur.com/dsvmu.png"/></div>
CSS:
div {
pointer-events: none;
}
img {
pointer-events: auto;
}
div:hover {
background: rgba(0,0,0,0.3);
}
img{
height:200px;
width:200px;
}
img:hover{
width:400px; /*OR transform: scale(1.5)*/
box-shadow: 10px 10px 5px #888888;
}
Upadated fiddle.
I will suggest to use transform css property to resize the same image when user hover on it.
.banner img:hover {
transform: scale(1.25);
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So i came accross the following template but due to the fact they have base64 encrypted their javascript / page elements for god only knows what reason it makes seeing the source code very difficult.
http://yootheme.com/demo/themes/joomla/2010/planet/index.php?option=com_content&view=article&id=44&Itemid=53&preset=default
But on that page the header bar with the class "header-bg" seems to have the background-position constantly changing most likely via the use of javascript and i like the design and effect of the colors so i am curious if someone can help me or fiddle to me a demo of how they are doing this.
I love the way the border effect is constantly rotating around in different variations of colors like that. (Not sure if anyone else finds that beautiful)
They use a background image, and they animate background-position using JS.
Here I use CSS animations instead:
#keyframes bg {
from {
background-position: 0 0;
}
to {
background-position: 1500px 0;
}
}
.header-bg {
border-radius: 15px; /* outerRadius */
padding: 3px; /* separation */
animation: bg 10s infinite linear;
background: url("data:image/jpeg;base64,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") repeat scroll 0px 0px transparent;
}
.header-inner {
background: #fff;
border-radius: 12px; /* outerRadius - separation */
padding: 5px;
}
<div class="header-bg">
<div class="header-inner">Foo bar</div>
</div>
Also note that a gradient could be used instead of that image.