We Keep Coding

How to scale a div to a responsive image

I'm making a responsive website and I want a image next to a div.
While placing the image next to the div is no problem, it gets tricky when I make my screen smaller.
I gave the image a width of 100% and a height of auto (responsive image) and this is the result:
This example is how it needs to be permanent, even when I scale it down.
Right now when I scale it down, this happens:
Because the image is responsive, it shrinks and the div stays in place.
Is there any way to make the div scale with the picture?
My CSS (Made in SASS):
.block-middle{
background-color: $oranje;
color: #fff;
padding-top: 85px;
padding-left: 55px;
padding-right: 55px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
padding-bottom: 87px;
.button-wit-bruin{
margin-top: 30px;
display: inline-block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
padding-bottom: 30px;
}
}
.block-right{
img.liggend{
width: 100%;
height: auto;
}
}
And the HTML is simply:
<div class="col-md-4 no-p block-middle">

<div id="img1_div"></div>
<img id="img1" alt="" />
<script>
$(document).ready( function(){
$(window).on("load", function(){
$(window).on("resize", function(){
var imgHeight = $("#img1").height();
$("#img1_div").height( imgHeight );
}).resize();
});//window load
});//document ready
</script>
This code will work in most cases ( except there's no overriding behaviour ), no matter where your image and div are placed. I would like to mention though that resize and scroll events should not be handled crudely this way, but should be optimised using a global timeout variable.

the trick is to set the height of the div relative to the width...which ironically, you can't do with the height property, since height:auto; makes it the height of it's children.
padding however is relative to the width of the parent...so it's a little bit funky, but if you play with the padding-bottom as a % and make the height:0px; you can achieve the desired effect without using Javascript. Here's the relevant CSS:
.responsive-background {
float:left;
width:60%;
height:0px;
padding-bottom:30%; /* adjust this depending on the height/width of the image you are aligning to */
}
And a Codepen with more detail and some additional styling:
http://codepen.io/ryantdecker/pen/LZYYaj
I think this will do the trick for you.

One way I can think of is, use the image as background for div and use background-size as cover:
.right-block {
background: url('https://placeimg.com/640/480/any');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}

Ahhh sorry I misunderstood your question. This can be done with a bit of flexbox if your target browsers support it. Is this the result you're looking for?
.container {
display: flex;
}
.left-block {
background: red;
width: 50%;
}
.right-block {
width: 50%;
}
.image {
display: block; // Removes spacing around image cause by default display: inline;
width: 100%;
}
<div class="container">
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
</div>
Previous Answer:
It seems as though there's a height set on your .block-right element. The code you provided is rather incomplete as you're missing the markup for your .block-right element. But is this what you're looking for?
.left-block,
.right-block {
float: left;
width: 50%;
}
.left-block {
background: red;
height: 200px;
}
.right-block {
background: grey;
}
.image {
width: 100%;
}
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>

Display image when mouse over image

I have a small icon set as
<a class="snapchat" style="margin: 5px 5px 0 -2px;"
target="_blank" href="#"><img src="theimage" />
</a>
I need to display a div below with an image when user mouse over the icon.
I tried by adding a hover class to the icon:
a.snapchat:hover {
width:200px;
height:200px;
background-image: url("hover-image");
position:relative;
top:60px;
}
but it does not work as expected. Is there a solution to get this?
Fiddle : https://jsfiddle.net/tkux5uav/

You can do this by setting opacity: 0 and a negative top property on the img. When you then hover you change these properties to opacity: 1 and a positive top property. This along with the transition will make the changes appear as animations.
To do this, you also have to "abstract" the img from the a so that it can move and hide independently and without affecting it's parent. Do this by setting the parent anchor to position: absolute and then the child image to position: relative.
There might be better ways you can accomplish this, but I only edited the css. I left your markup untouched.
Modifications after comment:
Example Fiddle
a.snapchat {
position: relative;
background: lightgrey;
}
a.snapchat img {
position: absolute;
opacity: 0;
width: 100px;
height: 100px;
left: 0;
top: -20px;
transition: opacity .5s, top .5s;
}
a.snapchat:hover img {
opacity: 1;
top: 20px;
}
<a class="snapchat" style="margin: 5px 5px 0 -2px;" target="_blank" href="#">Hover for effect<img src="http://i.utdstc.com/icons/256/snapchat-android.png" /></a>

If you give an id to the div with the image (for example id="imageDiv"), you can manipulate it with CSS like this:
#imageDiv {display: none;}
a.snapchat:hover #imageDiv {display: block;}

Here we go:
<img id="Image"/>
<script>
$(document).ready(function(){
$("#Image").mouseover(function(){
$("#Image").show();
});
$("#Image").mouseout(function(){
$("#Image").hide();
});
});
</script>
Hope it helps;)

Starting from your approach, the easiest implementation would be to have no img src but two background images in css, one for each state (hover or not).
Html
<div class="snapchat"><a style="margin: 5px 5px 0 -2px;" target="_blank" href="#"> </a></div>
Css
.snapchat{width:300px;height:300px;display:block;background-image: url("image1")}
.snapchat:hover{width:100%;height:100%;background-image: url("image2");
position:absolute;
top:60px;}

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.

This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>

Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}

Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}

You could also set the image to display: block and add padding, if it does not mess with your layout.

Image hover - Change effects

I'd actually want to change an image when someone hovers the mouse over the image.
Lets say I have an image:
<img src="image.png"/>
I want to change it with the following effects on hover:
The image should be clickable, so it should be a link which redirect users to another page
The image's background should be black-ish, with opacity
On the image it should appear an other image in the middle
How is it possible to do it?

I suggest that you create a link <a class="my-image">foo</a> and use css to get the rollover effect. CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript.
example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}

you can make it like this:
<a class="superimage" href="http://yourlink.com"></a>
and the CSS:
.superimage {
background-image: url(superimage.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
opacity: 0.8;
}
.superimage:hover {
background-image: url(superimageonhover.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
}
more help? just ask

Making CSS generic for image centering

Below is my CSS. It is used to centre an image. (This code works)
.imagecentre{
width: 25px;
position:relative;
margin:0 auto;
}
In order for it to work, you need to state the width. However, not all my images are 25px.
How can I make this css generic enough to accommodate all images using javascript?

If you only want to center an image in a container, you can set text-align: center on the container, regardless of what styles you have on the image:
<div style="width: 100%; border: 1px solid black; text-align: center">
<img src="https://www.google.com/logos/2012/vets_day-12-hp.jpg">
</div>​

You can use the following structure:
.image-wrapper {
display: block;
text-align: center;
}
.image-wrapper > img {
display: inline;
}

In the jquery set the widht dynamically to ".imagecentre" class
$(function(){
$(".imagecentre").css("width", $(this).width());
});
Hope this will help !!

you can use margin: 0px auto, only if the element is block element (div,p,h1 etc..) and not inline elements (images and span for example are inline elements) so you need to add text-align:center; to the parent element of the inline element..)
if it's more than one picture into the div..
img.imagecentre{
width: 25px;
display:block;
float:left;
margin: 0 10px 0 0; /* change the 10 to the space you want.. */
}
if it's one picture... (div_warp = the parent div of the image, imagecentre = the img element)..
#div_warp {
text-align center;
...
...
}
.imagecentre{
width: 25px;
}