Me and my friend recently have a problem with a portfolio case, the hove over animation doesnt go back properly to the original picture. How can we fix this?
See: The website
<div class="col-md-3 col-sm-6">
<div class="case">
<img src="img/2.jpg" class="img-responsive">
<div class="case_content">
<div class="case_text">
<h3>Market Download Buttons</h3>
<h4>UI Design</h4>
</div>
<a class="venobox" href="img/2.jpg"><p class="balk">View Dribbble Shot</p></a>
</div>
</div>
</div>
.cases {
max-width: 100%;
padding: 0;
}
.case {
overflow: hidden;
position: relative;
}
.case_content {
background-color: rgba(54,54,62,0.99);
position: absolute;
bottom: -100%;
width: 100%;
height: 100%;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
opacity: 1;
}
.case_text {
width: 80%;
padding: 0 0 0 5%;
}
Try using the hover option in CSS
.case {
..
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
..
}
.case:hover, .case:hover .case_content {
display: block;
}
.case_content {
..
display: none;
..
}
Related
For visualization of the intended effect, go near the bottom of this site, at the "Catering Services" section, and hover over the three images.
I want my images, on hover, to zoom-in -- increase in height and width -- while the frame around it shrinks, with overflow:hidden ofcourse.
Here's what I have written so far:
<style type="text/css">
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 120%;
}
</style>
<div class="container">
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
</div>
<!---End of container-->
The height of the frame is shrinking but not the width. Moreover, I want the image to expand on all four sides, and the frame to shrink likewise. Can this be achieved with something other than transitions? Any suggestions or tips on how should I go about solving this?
Just animate the img's transform:scale() and you should be all set.
Hope it helps!
.container {
float: left;
width: 50%;
margin: 0 auto;
}
.frame {
width: 80%;
height: 50%;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover {
width: 70%;
height: 45%;
}
.frame > img {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.frame:hover img {
transform: scale(2);
}
<div class="frame">
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" alt="Image of a dumb cat sitting on a laptop" title="get off my laptop" />
</div>
I am having an issue. When I hover over the image, a dark overlay appears but CSS Transition property is not working on it.
Here is the html:
<div class="col-md-12">
<div class="collection-category">
<img src="http://dummyimage.com/600x400/#C1C1C1/fff" />
<a href="#">
<div class="overlay_wrap">
<div class="overlay">
<h2 class="collection_title">Headline One</h2>
</div>
</div>
</a>
</div>
</div>
And CSS is:
.collection-category {
display: block;
overflow: hidden;
margin: 10px 0;
position: relative;
}
.collection-category img {
width: 100%;
max-height: 250px;
}
.collection_title {
display: table-cell;
vertical-align: middle;
font-size: 28px;
}
.overlay_wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.overlay {
display: none;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
display: table;
height: 100%;
width: 100%;
}
Here is the JSFiddle
http://jsfiddle.net/cnbvoe32/
Any help would be highly appreciated.
thanks in advance.
It's because you can't transition from display: none to display: table.
Instead, you could transition the opacity property by setting the initial display to table along with opacity: 0 and then transitioning to opacity: 1:
Updated Example
.overlay {
display: table;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
opacity: 1;
}
I have 4 divs floating left next to each other with a set hover width transition, three divs are the same width but the fourth is smaller. When you hover up on the div it gets bigger and I need the rest to reduce the width automaticaly to the set reduced-width value.
Here is the code
.container1 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container1:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container1 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image1 {
background: url("../img/bg1.jpg");
}
.container2 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container2:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container2 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image2 {
background: url("../img/bg2.jpg");
}
.container3 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
border-right: #000 4px solid;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container3:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container3 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
#image3 {
background: url("../img/bg3.jpg");
}
.container4 {
position: relative;
height: 600px;
width: 13%;
top: 0px;
left:0%;
z-index: 999;
float: right;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container4:hover {
width: 30%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
#image4 {
background: url("../img/3.jpg");
}
And the HTML
<div class="container1 animated bounceInLeft reduced-width" id="image1">
</div>
<div class="container2 animated bounceInDown reduced-width" id="image2">
</div>
<div class="container3 animated bounceInDown reduced-width" id="image3">
</div>
<div class="container4 animated bounceInRight reduced-width" id="image4">
</div>
when you are targeting 2 classes you should do it without spaces( like you did .container1 .reduced-width it should be .container1.reduced-width)
set width in such a way that your design won't break.. like your width of all containers should be 24%(as you have 4px border too) so that total will be equal or less than 100%.
You should write least css and target more elements. like you are targeting a particular div everytime which is not advisible.. you could use reduced with class only once and it would have set the size everytime.
this could be your reduced/optimized code:
HTML:
<div class="container animated bounceInLeft" id="image1"></div>
<div class="container animated bounceInDown" id="image2"></div>
<div class="container animated bounceInDown" id="image3"></div>
<div class="container animated bounceInRight" id="image4"></div>
CSS:
.container {
position: relative;
height: 600px;
width: 24%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
background-color:red;
}
.container:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container.reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}
#image2 {
background: yellow;
}
#image3 {
background: green;
}
#image4 {
background: blue ;
}
Here is CodePen Link
You don't need to do all that stuff for doing what you want. You can do it without any Javascript or jQuery using just CSS3.
Wrap your divs in a container.
Apply display: flex for the container.
Apply flex: 1 1 to the children. This is important.. do not give any flex-basis.. let it default.
Give a width: 100%; to children, they will automatically grow/shrink to available space.
Apply flex: 1 1 <your-width> for :hover on children. That's it.
Demo Fiddle: http://jsfiddle.net/abhitalks/xghqmq6u/
See this snippet:
.wrap {
width: 100%;
display: flex;
flex-direction: columns;
}
.floaters {
flex: 1 1 0%;
height: 120px; width: 100%;
transition: all 500ms;
}
.floaters:hover { flex: 1 1 50%; }
.container1 { background-color: #f00;}
.container2 { background-color: #0f0;}
.container3 { background-color: #00f;}
.container4 { background-color: #ccc;}
<div class="wrap">
<div class="container1 floaters" id="image1"></div>
<div class="container2 floaters" id="image2"></div>
<div class="container3 floaters" id="image3"></div>
<div class="container4 floaters" id="image4"></div>
</div>
This is how you can fix it.
HTML (you don't need a wrapper)
<div class="container1 animated bounceInLeft" id="image1"></div>
<div class="container2 animated bounceInDown" id="image2"></div>
<div class="container3 animated bounceInDown" id="image3"></div>
<div class="container4 animated bounceInRight" id="image4"></div>
CSS
.container {
position: relative;
height: 600px;
width: 24%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
background-color:red;
}
.container:hover {
width: 35%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container.reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}
#image2 {
background: yellow;
}
#image3 {
background: green;
}
#image4 {
background: blue ;
}
And of course you need Javascript (Jquery here)
$('.animated').mouseenter(function(){
console.log('here');
$(this).removeClass('reduced-width').siblings('.animated').addClass('reduced-width');
}).mouseout(function(){
$('.animated').removeClass('reduced-width');
});
EDIT: now the 4th column has a smaller width
Here is an example how you could fix it: http://jsfiddle.net/intergalactic_overlords/0hLmrme4/
Html needs a wrapper. When hovering the wrapper, children (the containers) width is set to 20%. When hovering a specific container, its width is set to 40%.
<div class="container-wrap">
<div class="container container1 animated bounceInLeft reduced-width" id="image1">
</div>
<div class="container container2 animated bounceInDown reduced-width" id="image2">
</div>
<div class="container container3 animated bounceInDown reduced-width" id="image3">
</div>
<div class="container container4 animated bounceInRight reduced-width" id="image4">
</div>
</div>
CSS:
.container {
background:snow;
box-sizing:border-box;
position: relative;
height: 600px;
width: 23%;
float: left;
z-index: 99;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container-4 {
width: 21%;
}
.container-wrap:hover > div {
width: 21%;
}
.container-wrap:hover > .container4 {
width: 16%;
}
.container-wrap > .container:hover {
background: yellow;
width: 42%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container-wrap > .container4:hover {
background: yellow;
width: 37%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
The vertical alignment of the text on :hover isn't working . Also after hovering, the whole area of posts should be cover with pointer cursor and should be clickable, but it isn't.
HTML
<div class="photoset post-background">
<div class="imgoverlay text-light">
<a href="{Permalink}">
<div class="photos">
{block:Photos}
<img alt="" src="{PhotoURL-500}">
{/block:Photos}
</div>
<div class="overlay">
<span class="overlaycolor"></span>
<div class="overlayinfo">
{block:ContentSource}
<h6>{SourceTitle}</h6>
{block:ContentSource}
</div>
</div>
</a>
</div>
</div>
CSS
.imgoverlay {
position: relative;
overflow: hidden;
display: block;
max-width: 100%;
}
.imgoverlay img {
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
}
.imgoverlay .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(Opacity=0)";
-webkit-transition: opacity .3s ease;
-moz-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
-ms-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.imgoverlay:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(Opacity=100)";
}
.imgoverlay .overlaycolor {
width: 100%;
height: 100%;
background: {color:Post Hover};
};
Example http://www.jnck.sk/
Thanks for any help!
Use span with display:block instead of div inside link. Block elements like div shouldn't be in inline blocks.
For vertical align of text you can use i.e. this:
.overlayinfo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Dear Stackoverflow readers,
Using only CSS3, how do I show a div after a transition is completed.
This is the snippet of HTML I'm working with
<div class="biography">
<p>Title</p>
<p id="moreBio">This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
This is the snippet of CSS3 I'm working with
.biography {
width: 100px;
height: 40px;
float: left;
margin: 5px;
background: #3399FF;
color: #ffffff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
position: relative;
right: 5%;
font-weight: bold;
font-size: 15px;
text-align: center;
padding: 10px;
border-radius: 5px;
opacity: 0.4;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.biography:hover {
width: 200px;
height: 600px;
margin: 10px 10px 0px -100px;
opacity: 1;
background: #7C7C7C;
}
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
}
#moreBio:hover {
opacity: 1;
}
I want #moreBio to show after the transition is completed, how would I go about doing that?
Thank you so much in advance.
Add a transition-delay to #moreBio equal to the transition time of .biography, and make the appearance trigger when .biography is hovered upon.
#moreBio {
opacity: 0;
transition: opacity 0.5s 0.5s ease;
-webkit-transition: opacity 0.5s 0.5s ease;
-o-transition: opacity 0.5s 0.5s ease;
-moz-transition: opacity 0.5s 0.5s ease;
}
.biography:hover #moreBio {
opacity: 1;
}
Instead of doing #moreBio:hover you could do .biography:hover #moreBio and then add a delay for the #moreBio transition like so
// ... other code just like it's
#moreBio {
opacity: 0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.biography:hover #moreBio {
opacity: 1;
}
Here is the working sample.