I have four divs. When I hover one div, its height and width increase with animation. I want something like when I hover on one div its size increases and other 3 div sizes are decreasing.
I am done till increase size of div on hover I don't understand how to change size of all other divs at one time.
Here is my HTML and CSS.
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
<div align="center">
<div style="width:1000px;">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>
anyone please helpme
No need of Javascript/jQuery, you can do this using CSS only. You can take advantage of :hover class of CSS.
You can use the container's :hover to animate(decrease) the dimension of the elements. Ex: .container>div:hover ~ div { to set the styles of all the other <div> elements than the hovered element
You can animate(increase) the dimensions of the element that is hovered
.container {
width: 1000px;
}
.container:hover div:not(:hover) {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(.5);
}
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.container .style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
<div align="center">
<div class="container">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>
Update
Because, there are some issues when hovering between the two elements all the elements are contracted, it's better to use Javascript. No need of Javascript/jQuery, I'm taking back my words.
You can use siblings() to select all the sibling elements of the current elements.
$('.container .style_prevu_kit').hover(function() {
$(this).siblings('.style_prevu_kit').addClass('animate');
}, function() {
$(this).siblings('.style_prevu_kit').removeClass('animate');
});
.container {
width: 1000px;
}
div.animate {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(.5);
}
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.container .style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div align="center">
<div class="container">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>
Since you have tagged with jQuery, you can do something like add a class to all the sibling elements when a item is hovered, then you can add css rules to that class to have a smaller view
jQuery(function($) {
$('.style_prevu_kit').hover(function(e) {
$(this).siblings().toggleClass('small', e.type == 'mouseenter')
})
})
.style_prevu_kit {
display: inline-block;
border: 0;
width: 196px;
height: 210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
background-color: #00a096;
}
.style_prevu_kit:hover {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
.style_prevu_kit.small {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div align="center">
<div style="width:1000px;">
<div id="s1" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s2" class="style_prevu_kit"></div>
<div id="s3" class="style_prevu_kit"></div>
</div>
</div>
You could use css selector ~ but this only works for the next siblings and not the previous ones. Selecting previous siblings is not possible. http://jsfiddle.net/q041cwd8/
.style_prevu_kit:hover ~.style_prevu_kit {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.5);
transition: all 200ms ease-in;
transform: scale(0.5);
}
I think this can be done a lot simpeler. If you hover one of the squares, you're also hovering the container. You can use that. In the example below I use color and fontsize to keep the example a bit less complicated:
/* Default state */
#container .style_prevu_kit{
opacity: 0.75;
background: orange;
display: inline-block;
width: 40%;
height: 50px;
vertical-align: top;
transition: opacity 0.5s, background 0.5s, font-size 0.5s;
}
/* The other not selected elements */
#container:hover .style_prevu_kit{
opacity: 0.5;
background: blue;
}
/* The currect selected element */
#container .style_prevu_kit:hover{
opacity: 1.0;
background: green;
font-size: 2em;
}
<div align="center">
<div id="container" style="width:100%;">
<div id="s1" class="style_prevu_kit">s1</div>
<div id="s2" class="style_prevu_kit">s2</div>
<div id="s2" class="style_prevu_kit">s3</div>
<div id="s3" class="style_prevu_kit">s4</div>
</div>
</div>
Related
Currently, my notification popup work but I would like to do this animation without JS/JQuery (only animation). Also there is an issue with clicking. When you click outside when popup is open, then work normally. But if you click on this text OPEN, then ending animation won't work.
Animation appearing and decreasing from right top to bottom and closing from bottom to top. It should work in both directions but alternately. It currently only works when you want close popup.
JSFiddle
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Script
$(document).ready(function() {
$("#e_a_c").click(function(e) {
$("#t_1").toggle();
setTimeout(function() {
$("#t_1").addClass("tsc_1");
}, 1);
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#t_1 *')) {
$("#t_1").removeClass("tsc_1");
setTimeout(function() {
$('#t_1').removeAttr('style');
}, 150)
}
});
});
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
Probably NOT the answer; more a starter.
I don't think you will reach your expectations with a full CSS solution, just because closing your menu by clicking outside of it can't be done without javascript.
Anyway, this is a working version with javascript / jquery
https://jsfiddle.net/piiantom/98sfoLcg/
I reworked the javascript part in order to have a functional event management.
The bugs you are refering to are fixed.
HTML
<a class="open-edit-popup" id="e_a_c">OPEN</a>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
JAVASCRIPT
$(document).ready(function() {
$("#e_a_c").click(function(e) {
e.stopPropagation();
e.preventDefault();
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
} else {
$("#t_1").addClass("tsc_1");
}
});
$(document).click(function(e) {
if ($("#t_1").hasClass("tsc_1")) {
$("#t_1").removeClass("tsc_1");
}
});
});
CSS
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.tsc_1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
For the full CSS version, this is a working version by using the checkbox input hack. But, the opening / closing is only managed by clicking on OPEN. Menu is not closed when clicking outside.
https://jsfiddle.net/piiantom/oht40Lk5/
Besides, all your menu is nested inside a <label>, which is not that good
HTML
<label>OPEN<input type="checkbox" class="open-edit-popup" id="e_a_c"/>
<div id="e_a_p">
<div class="e-p-cont">
<div class="e-p-main" id="t_1">
<div class="e-p-text-1 dps">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>
</label>
CSS
#e_a_c{
position: absolute;
opacity: 0;
cursor: pointer;
}
#e_a_c:checked+#e_a_p #t_1{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.e-p-main {
margin-top: 40px;
height: auto;
width: 200px;
background: #fff;
border: 1px solid #ddd;
z-index: 99;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .15s ease-out;
transition: -webkit-transform .15s ease-out;
-o-transition: transform .15s ease-out;
transition: transform .15s ease-out;
transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
simple menu header when not opened
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
#import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
body,
html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Arimo', sans-serif;
}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
right: 0;
background-color: #EF8354;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #EF8354;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right {
position: fixed;
right: 40px;
top: 20px;
}
.nav-right.visible-xs {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right.visible-xs .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
.button.active .middle {
width: 0;
}
.move-to-left {
-webkit-transform: translateX(-400px);
-moz-transform: translateX(-400px);
-ms-transform: translateX(-400px);
-o-transform: translateX(-400px);
transform: translateX(-400px);
}
nav {
padding-top: 30px;
}
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
.ua {
position: absolute;
bottom: 20px;
left: 60px;
}
.fa {
font-size: 1.4em;
color: #EF8354;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ua:hover .fa {
color: #FFF;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#media (min-width: 480px) {
.nav-list {
display: block;
}
}
#media (min-width: 768px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
.visible-xs {
display: none;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive">
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<a href="https://codepen.io/tonkec/" class="ua" target="_blank">
<i class="fa fa-user"></i>
</a>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">About Us</li>
<li class="sidebar-item">What We Do</li>
<li class="sidebar-item">Get Involved</li>
<li class="sidebar-item">Contact Us</li>
</ul>
<hr>
</div>
hello the above code is for side navigation bar.it works fine for me but the problem i am facing is when i click on the hamburger icon it pull or slide my main section to the left side.i don't want to slide my background content or main content to be slide left side & my close button is to be display on right side of menu body section.but it display outside or aside of the menu bar.as well i want to make my menu shrink or resize on page scroll.menu design
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- nav-right -->
<main>
<nav>
<img src="http://safindia.org/assets/img/logohome.png" class="img-responsive">
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<a href="https://codepen.io/tonkec/" class="ua" target="_blank">
<i class="fa fa-user"></i>
</a>
</main>
<div class="sidebar">
<span class="glyphicon glyphicon-remove pull-right" id="close-button" style="color: white;font-size: 30px;"></span>
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">About Us</li>
<li class="sidebar-item">What We Do</li>
<li class="sidebar-item">Get Involved</li>
<li class="sidebar-item">Contact Us</li>
</ul>
<hr>
</div>
<style>
#import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
body,
html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Arimo', sans-serif;
}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
right: 0;
background-color: #EF8354;
display:none;
z-index: 3;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #EF8354;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-right {
position: fixed;
right: 40px;
top: 20px;
}
#btn-close {
z-index: 3;
}
.hidden-xs {
display: none;
}
.middle {
margin: 0 auto;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#btn-close .active .bar {
background-color: #FFF;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
nav {
padding-top: 30px;
}
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
}
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item {
opacity: 3;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #FFF;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFF;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before {
width: 100%;
}
.ua {
position: absolute;
bottom: 20px;
left: 60px;
}
.fa {
font-size: 1.4em;
color: #EF8354;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ua:hover .fa {
color: #FFF;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#media (min-width: 480px) {
.nav-list {
display: block;
}
}
#media (min-width: 768px) {
.nav-right {
position: absolute;
}
.hidden-xs {
display: block;
}
#btn-close{
display: none;
}
}
</style>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$(this).hide();
$(".sidebar").css('display','block');
});
$("#close-button").on("click", function() {
$('#btn').show();
$(".sidebar").css('display','none');
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
}
});
});
</script>
This is what you asked for? I have added close glyphicon instead of button.Hope this resolves your issue.
I have an image gallery. I want to change 'margin-top' to 50px for every '.item' element that has less than 140px of height(for responsive design purpose). this is what i have so far.
what should I write in between the curly brackets in order for this to work?
please reffer to the javascript code.
var itemHeight = $(".flex-images").find(".item").height();
if(itemHeight<140){
$(this(".item")).style.marginTop = "50px";
}:
.item {
cursor: pointer;
max-height: 150px;
min-height:120px;
position: relative;
overflow: hidden;
top:0;
left:0;
}
.item img {
position: absolute;
right:0;
padding:0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.item {
position: absolute;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.item:hover { opacity: 1; }
.item .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
text-align:center;
}
.item {
opacity: 1;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.item:hover,
.item:focus {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.item .tagline {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity:0;
margin-top:100px;
}
.item:hover .tagline,
.item:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="flex-images">
<div class="item " data-w="160" data-h="100"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">
<div class="tagline overtext"> <img src="http://diginfobettersystem.com/i/images/facebook-logo.png"style="height:30px;width:30px;">etet
</div>
</div>
</div>
I am experimenting with css3 transitions and want to introduce an onClick event to trigger the transition instead of the pseudo hover class. The problem I have is that the transition is split onto two elements.
Here is the HTML:
<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>
And here is the CSS:
.box {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
border: solid 2px #E6171A;
}
.mask {
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background-color: #021288;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0) rotate(-360deg);
-moz-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.box:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
-ms-transition-delay: .4s;
transition-delay: .4s;
}
.box img {
-webkit-transition: all 0.4s ease-in-out 1.3s;
-moz-transition: all 0.4s ease-in-out 1.3s;
-o-transition: all 0.4s ease-in-out 1.3s;
-ms-transition: all 0.4s ease-in-out 1.3s;
transition: all 0.4s ease-in-out 1.3s;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.box:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
-o-transition-delay: .8s;
-ms-transition-delay: .8s;
transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state */
}
So the question is how do I apply the onClick event to a transition that is spread over two elements? Hope someone can help!
Substitute :hover with a class, something like clicked
.box.clicked
Then on click, use addClass to add that the clicked class to .box. That change should trigger the animation originally done by :hover.
Here's an example using toggleClass to add/remove the class on click and change the height of the div.
I would like to use this zooming effect on a project of mine
http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html
I am using an image shaped as a circle (png) . I tried to make the containing div circular using border radius
.view {
width: 132px;
height: 132px;
margin-left: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-moz-border-radius: 66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border-radius: 66px;
cursor: default;
}
.view .mask,.view .content {
width: 132px;
height: 132px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
but when the image zoom, it shows rectangular margin. Any help on how to mask as a circle would be much appreciated!
.view: hover {
-moz-transform: scaleX(2);
-o-transform: scaleX(2);
-ms-transform: scaleX(2);
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
Here, the image/images with the classname view gets scaled 2X every time user hovers over the same.
Try use percentges (%) instead of pixels (px).
-moz-border-radius: 25%;
-webkit-border-radius:25%;
-khtml-border-radius:25%;
border-radius: 25%;