We Keep Coding

How to make an image zooming to left hand side over hover effect using css?

am developing a simple image view and i want the image to zoom up to the left hand side when a user place up a mouser point. Current i have been able to make image zoom out but it goes to right by default. Here is my codes
.imageDiv {
position: static;
height: 130px;
width: 160px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
transform: scale(1);
}
.imageDiv:hover {
width: 300px;
height: 250px;
position: relative;
display: block;
border: 3px solid #fed136;
background-color: #b20000;
border-radius: 20px;
position: relative;
z-index: 999;
}
<div class="imageDiv">
<img src="./img/images/mobilePhone.png">
</div>
please help

Getting a black overlay with text when hovering over an image

I searched all over for this and I found a couple of solutions, but I cannot get this to work in my application. What I am trying to do is to get a black-overlay over an image when hovered over and then text to appear. Ideally I want the text to have a border that looks like a button.
I want this to work with my scale on hover as well. For some reason on my actual page, when hovering over an image, it does nothing but scale. It doesn't turn the parent div the gray color.
What am I doing wrong?
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>

Hope this is what you want. Check this out. Added an overlay class for black overlay.
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});
* {
box-sizing: border-box;
}
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
float: left;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border: 1px solid #fff;
padding: 5px;
text-align: center;
}
.home-img-block:hover:after {
opacity: 1;
}
.home-img-block img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.home-img-block:hover img {
-webkit-transform: scale(1.25);
/* Safari and Chrome */
-moz-transform: scale(1.25);
/* Firefox */
-ms-transform: scale(1.25);
/* IE 9 */
-o-transform: scale(1.25);
/* Opera */
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
<div class="overlay"></div>
</div>
</div>

You are missing a few things in your css this is why you are not getting the desired affect that you are looking for. You needed to add position relative to the .home-img-block class and then some of your stuff was just placed wrong giving a wierd shaking thing when hovering over it.
Here is a link to jsfiddle so you can mess around with it :
https://jsfiddle.net/kriscoulson/y32ekgdm/
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; Safari and Chrome
-moz-transition: all 1s ease; Firefox
-ms-transition: all 1s ease; IE 9
-o-transition: all 1s ease; Opera
transition: all 1s ease;
}
.home-img-block:hover img{
transform:scale(1.25);
background: rgba(0,0,0,0.3);
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}

It seems like an issue with the css. Mainly at these points:
home-img-block:hover img
and
.home-img-block img
Since, .home-img-block is wrapping the HTML. You dont have to be specific. And plus the first CSS line for hover set seems to be wrong. I have forked the code to a fiddle.
https://jsfiddle.net/kuape5np/
Could you confirm, is that you wanted?

Check this out I hope you are looking for same
.home-img-block {
width: 33.33%;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
width: 100%;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
max-height: 100%;
}
.home-img-block:after {
background: rgba(0,0,0,.5);
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover h2 {
color:#fff;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover:after,.home-img-block:hover .hover, .home-img-block:hover .hover h2 {
opacity: 1;
}
<div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="hover">
<h2>FIND OUT MORE</h2>
</div>
</div>
</div>

What is this jQuery "on-mouse-over-scroll-the-image" plugin?

I came across this functionality
http://themes.leap13.com/wiz/
where if you hover the mouse over a box, the image will start scrolling within that box.
How does this plugin is called? Any code examples on how to do it?

This can be achieved without any jquery. For instance
.screen {
width: 500px;
height: 300px;
display: inline-block;
margin: 10px;
padding-top: 12px;
position: relative;
margin-bottom: 80px;
text-decoration: none;
}
.screen div {
display: inline-block;
width: 500px;
height: 300px;
background-position: center top;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.screen:hover div {
background-position: center bottom;
-webkit-transition: all 10s;
-moz-transition: all 10s;
-ms-transition: all 10s;
-o-transition: all 10s;
transition: all 10s;
}
.screen h2,
.screen h2 a {
font-size: 17px;
color: #fff;
font-weight: 300;
position: absolute;
bottom: -40px;
text-align: center;
width: 100%;
}
<div class="screen">
<div style="background-image:url(http://themes.leap13.com/wiz/wp-content/uploads/2014/10/restaurant-wiz1.jpg);"></div>
<h2>Some text</h2>
</div>
Basically all you need is a long image, and you add a transition on it to make it move up on hover (you're changing background position).
You could add easing to this, delay on hover, what ever your heart desires :D (within the realm of available CSS3 code ofc).

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:

You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.

In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.

CSS transition to bottom-right from center

I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller.
This should happen with animation. I tried css transition which is animating the stretched element to top:
shrinking slowly to the provided dimensions while moving towards top-right
but what I want is
Shrink in middle and then move to bottom-right of the page by animating.
Fiddle
CSS
#main {
position: fixed;
height: 100%;
width: 100%;
margin-top: 50px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
How should I do this?

You can try combining both transition and animation. Even you can use only animation here:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-animation: to-bottom-right 0.5s 0.5s forwards;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#-webkit-keyframes to-bottom-right {
100% {
left: 100%;
top: 100%;
margin-left:-100px;
margin-top:-50px;
}
}
Please test the demo using webkit-based browsers, you can add prefixes yourself for other browsers. Note that the animation will run after the transition has been done, so we have to use animation-delay.
Demo.
The demo above uses negative margins to center the div, its advantage is well supported but we have to change the negative margins' values when changing the size of the div. Another way is using translate transform, this will center the div greatly but it requires browsers to support transform feature. Here is the demo using translate instead to center the div Demo 2.
Here is another solution using only animation, the transition is just used for animating the color changing.
Demo 3.
UPDATE: All the demos above work perfectly for browsers supporting animation feature. However it's a pity that IE9 does not support this feature. I've tried using some workaround and I've found a solution by using multi-transition. The first transition lasts for 0.5s while the second transition will start after 0.5s. To animate the div from center to bottom-right corner, you have to use transition for the translate transform. Here is the code it should be:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
-webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
-ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
-moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
transform:translate(50vw , 50vh) translate(-50%,-50%);
-webkit-transition: all 0.5s ease, -webkit-transform 0.5s 0.5s ease;
-ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
-moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
transition: all 0.5s ease, transform 0.5s 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
Updated Demo.

Do you mean like this: fiddle
Here's what I changed:
#main {
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 100px);
width: 100%;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 50px;
margin-top: 50px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
I set the position to absolute and the bottom and right properties to 0. Since the element is not in the document flow any more, I used calc to move set the element 100px smaller than the height.

Well i tried
http://jsfiddle.net/tyuAk/15/
in jquery tho
$("#click").hover(
function() {
setTimeout( '$("#main").delay(500).attr("id","newclass");' ,500 );
});
#main {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
}
#newclass {
position: absolute;
height: 50px;
width: 100px;
margin-top:25%;
background-color: green;
}
#click:hover + #main {
width: 100px;
height: 50px;
margin-top:25%;
background-color: green;
transition-property:width,height,margin;
transition: 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
#click:hover + #newclass {
margin-top:0px;
transition: all 0.5s ease;
}