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
I am not good in front end. But now I need to write some jQuery. What I want to do is I have a text box. It has many parents element including HTML body tag. What I want to do is I want to change all the color a little dark with opacity for the rest of elements except that text box when it is focused.
The fading is something like modal box in Bootstrap. How can I achieve that?
you could add a huge box-shadow (100vmax is enough to cover all the viewport), maybe with a short transition, to the input element when it receives focus, e.g.
input {
box-shadow: 0 0 0 100vmax rgba(0,0,0, 0);
transition: 1s box-shadow
}
input:focus {
box-shadow: 0 0 0 100vmax rgba(0,0,0, .7);
}
Codepen example: http://codepen.io/anon/pen/pjpqjg
When the input loses the focus, the effect disappears with the same duration.
Note: On Safari this effect based on box-shadow doesn't work unless you set -webkit-appearance: none;, but you might use an outline instead (tested on Version 9.0 (9537.86.1.56.2)/MacOS 10.9.5)
input {
outline: 100vmax rgba(0,0,0, 0) solid;
-webkit-transition: 1s outline;
transition: 1s outline;
}
input:focus {
outline: 100vmax rgba(0,0,0, .7) solid;
}
Codepen example: http://codepen.io/anon/pen/pjpqRb
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 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 !!
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 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 8 years ago.
Improve this question
I am working on a site .As you can see there's a menu item called Digital Marketing. The item has a submenu called Digital Marketing Consultancy.i want the submenus like in any other websites with the dropdown effect like when we hover the menu item the submenus dropsdown.
eg : like the menu here.
I have tried giving
.sub-menu{display:none;}
.sub-menu:hover{display:block;}
here is the fiddle .how can i make it like the menu effects in other sites.Please help.Thanks!!
updated fiddle
Pure css solution is CSS(3) transitions.
http://jsfiddle.net/9gjbfvwy/
use width and height 0, with overflow hidden.
Use CSS3 transitation to set them to auto.
See fiddle (it's your code, with 3 additions)
ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sub-menu is your submenu, so you need to fire your hover on your main menu item, not on your submenu item.
Add this to your css:
ul#menu-main li ul.sub-menu{
display:none;
}
ul#menu-main li:hover ul.sub-menu{
display:block;
}
Working jsFiddle: http://jsfiddle.net/wyy7e61o/1/
You should initially hide all the submenus and show them when hovering the parent menu.
Like
.sub-menu {
display: none;
}
.menu-item:hover > ul.sub-menu {
display: block;
}
Check Updated fiddle here
http://jsfiddle.net/wyy7e61o/6/
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.