This is a slightly fiddly question- essentially, I am making a grid of images where a coloured overlay (div) is displayed upon rollover, with a bit of text within that div. This is very similar to this website- http://twoarmsinc.com/work/category/all. To do this with a div instead instead of an image would be easy- you would nest the overlay inside the other div and set width and height to 100%. However, since you can't nest within an image, and the image is responsively changing size, how should I go about this? I'm not sure background-image will work because I am using a responsive grid system (Simple Grid).
Here's a CodePen: http://codepen.io/anon/pen/iIsGm/
html:
<div>
<div class='overlay'></div>
<img src="http://placekitten.com/300/200" alt="thumb">
</div>
css:
.overlay{
width:100%;
height:100%;
background:#333;
position:relative;
z-index:10;
}
Apologies for the ambiguity- any and all help is greatly appreciated!
You will first need to swap .overlay with the img, so it comes second in the stack.
You have some options for the .container div, but you'll need to set a width to set up a grid. I didn't include it in the fiddle, but you will likely want to set img to max-width: 100%; width: auto; height: auto;, so they can resize and keep their aspect ratios when the browser is resized. For .container, you can also use float: left with a set width. I used display: inline-block here to reduce the amount of code.
DEMO
DEMO with multiple divs floating and simple grid
CSS:
.overlay{
background:rgba(0,0,0,0.5);
position:absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
color: white;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
img {
display: block;
}
.container {
position: relative;
display: inline-block;
}
.container:hover > .overlay {
opacity: 1;
}
HTML:
<div class="container">
<img src="http://placekitten.com/300/200" alt="thumb">
<div class='overlay'>Some text</div>
</div>
Related
for clarity, see codepen: http://codepen.io/anon/pen/QyaLPb
I want to create an image with an overlay. The overlay should be the same size as the image, however because of the width: 100% and height: auto for both the .imagecontainer and img, they don't have the exact same height. The overlay now has a few pixels more height than the img. You can see the .imagecontainer has more height than the img inside (red background showing at the bottom). I need the imagecontainer and img to be responsive, so setting a fixed height is not really an option. How do I solve this?
HTML:
<div class="wrapper">
<div class="imagecontainer">
<img src="http://www.kleinewolf.nl/uploads/fancybox/8f5b7a59-32b7-4582-868b- e2ff1f3e41a2/2835832130.jpg">
<div class="overlay">
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
padding: 40px;
}
.imagecontainer {
width: 100%;
height: auto;
overflow: hidden;
background: red;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
display:none;
}
.imagecontainer:hover .overlay {
display:block;
}
If you're speaking of the red border below the image.
Add to your .imagecontainer img: display: block. That should solve the problem...
http://codepen.io/anon/pen/QyaWNE
Added line-height:0; to your container div. Images contained by parent divs usually tend to take margins from other elements, and line-height and font-size are usually a problem. Good luck!
I want to create responsive popup banner with close button here is my simple scenario:
<div class="banner">
<img src="...">
X
</div>
And my CSS:
.banner img{
max-width:100%;
max-height:100%;
position:absolute;
}
.close-btn{
position:absolute;
right:0;
z-index:2;
color:red;
background:#000;
padding:4px;
}
As you can see I stretch image depending on width and height.
Problem: I want close-btn to stick to the right side of the image and overlap it. To solve this the banner must be the same width as the image. If banner has position:absolute its width and height of course is 0.
Is it possible to achieve only with CSS?
Here is fiddle: http://jsfiddle.net/fjckls/qq590xz5/
I need image to be responsive to width and height
To make your image fully width AND height responsive, first off, you need to alter your units. You're currently using %'s which is all well and good, but for the 'fully height responsive' concept, the % units aren't much help.
Instead, you should look into using vh (view-height) and vw (view-width) units, since these are for the actual viewport that the user can see currently.
In order to position your 'x' over the top right of your image, you're going to have to alter your css slightly.
You could possibly include a css rule for your banner, first off. Something like:
.banner {
position:relative;
display:inline-block;
}
Whilst removing the 'position:absolute' rule from your image, since now your banner div will be the size of your image (not the default '100% of screen' that divs are set to originally).
This leaves us one problem, you haven't actually set where abouts you want the 'x' to appear vertically, so it will default to 'where it would position normally', which, in this case, would be below the image. To tackle this, you would need to add a top: or bottom: declaration to your 'x' class, and in my case, i've chosen to set it to the top (top:0;).
The overall fiddle can be shown here
or here:
.banner img {
max-width: 100vw;
max-height: 100vh;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
z-index: 2;
color: red;
background: #000;
padding: 4px;
}
.banner {
position: relative;
display: inline-block;
}
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg" /> X
</div>
I have updated the link
http://jsfiddle.net/qq590xz5/3/
<div class="banner">
<div style="position:abolute;">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
</div>
.banner img{
max-width:50%;
max-height:100%;
}
.close-btn{
position:absolute;
z-index:2;
color:red;
top:1%;
background:#000;
padding:4px;
}
Have a look
Thanks
try this..
Html
<div class="banner">
<img src="http://sockets.hogwartsishere.com/media/book_covers/l-bunny.jpg">
X
</div>
CSS
.banner{
position:relative;
width:200px;
}
img{
max-width:100%;
}
.close-btn{
position:absolute;
right:0;
top:0;
z-index:1;
color:red;
background:#000;
padding:4px;
}
Fiddle Demo
I found a solution that keeps the image centered horizontally and the x button on the top right of the image. It involves:
1) Making the .banner absolutely positioned, with margins from each window edge. This centers the entire .banner, however you might want to use fixed position if you need it to scroll along with the user's viewport.
It'll work as long as there aren't any other positioned elements as its parents.
.banner {
position: absolute;
top: 5%;
left: 25%;
right: 25%;
bottom: 5%;
}
2) Making a thing that sticks around the image, which will serve as a positioning guide for the little X.
<div class="shrinkwrap">
<img src="...">
X
</div>
.shrinkwrap {
/* shrink-wraps this div around its content;
as a side-effect, lets this div be centered with text-align: center; */
display: inline-block;
/* new positioning context! */
position: relative;
/* keeps the responsiveness */
max-width: 100%;
height: 100%;
}
3) Positioning the shrinkwrapper to always be in the center of the .banner.
.banner {
/* ... */
text-align: center;
}
.close-btn {
/* ... */
top: 0;
}
The finished version of this is here: http://jsfiddle.net/boxmein/qq590xz5/5/
I am creating a website, and I have an image at the top of my page. The image size is 1920x650 pixels. I am trying to code this correctly, and would like to know what is the best practice for placing images inside divs with heading text overlaying the image? I want the image to always be at 100% width, too.
Currently, I have tried this code, but when the image is at width:100%, and max-height: 600px; the size of the div cuts off the bottom of the image and butts up at the bottom of the heading text. I think it has something to do with my margin of the heading text. I am using a margin-top: -150px; for the heading, to achieve the text in the location where I want it to overlay on the image. Here is my code:
html:
<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>
with the css:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}
If I remove the margin-top: -150px; from my heading, the image fills up the div. Any help would be appreciated with what I am trying to achieve. Thank you in advance.
You should use the position instead of negative margin:
#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}
You can set the image as a background to the div welcome.Adjust the background-position to place the image at the desired position in the div using the css property
background-position
html
<div id ="welcome">
<h2>Welcome to my website</h2>
</div>
css
#welcome {
width:100%;
height: 600px;
overflow: hidden;
background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
color: #B0171f;
}
DEMO
Read more on background-position
Using the CSS background-image property, you can achieve this with very little code. Just make it the background-image of the h2 itself.
HTML:
<h2 id="welcome">Welcome to my website</h2>
CSS:
<style>
#welcome {
width:100%;
background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
color: #B0171f;
}
</style>
http://jsfiddle.net/#&togetherjs=DfmkLBOPVu
I don't think this is identical to the look you're currently going for, but it's a better foundation for what you're trying to do.
On the image above the triangle is outer block, and the main block have 'overflow: hidden'. During the animation part of the animated image is cropped. In the main block necessary boundaries of complex shape. Any ideas how is this possible? Requirement of browsers - top versions chrome or firefox.
example: http://jsfiddle.net/F7Cz9/
This one is a little complex and I don't have all the styling down yet but by using pseudo-elements on a wrapper to create the triangle above...you can do it.
The hover is there just to show the "overflow" working.
Codepen.io Demo
HTML
<div class="super-wrap">
<div class="imgwrapper">
<img src="http://lorempixel.com/output/city-q-c-350-100-8.jpg" alt="" />
</div>
</div>
CSS
.super-wrap {
width:700px;
margin: 50px auto 0;
padding-top: 50px;
border:1px solid grey;
}
.imgwrapper {
width:700px;
position: relative;
}
.imgwrapper img {
display: block;
margin-left: 0;
transition:margin-left 1s ease;
}
.super-wrap:hover img {
display: block;
margin-left: 50%;
}
I have an image that is bigger than its container div. When the browser/screen resizes, it should make the image bigger or smaller but always keeping the center of the image centered inside the div. One example of this is the following website: http://www.qdoba.com/ . They have their images centered as you resize the screen making it very well responsive. What I have at the moment only makes it resize horizontally but not vertically. This is what I have so far:
.swiper-container {
width: 100%;
height: 300px;
color: #fff;
text-align: center;
overflow: hidden;
}
.slide{
width:100%;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
Its pretty simple. [Jump to the end of the answer for the updated Fiddle]
HTML
<div class="slide">
<span class="Centerer"></span><div class="Centered">
<img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
CSS
*
{
margin: 0;
padding:0;
}
html, body
{
height: 100%;
}
.slide
{
text-align: center;
height: 100%;
width: 100%; /*not really needed*/
}
.Centerer
{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
width: 100%;
}
.Content img
{
max-width: 30%; /*so you can see the responsive alignment and size*/
}
If you don't set any height to the Slide, it will always have the exact height of its content, so it will look like there is no vertical alignment.
Check out this Working Fiddle
EDIT
I didn't understood you correctly.
Check out this New Fiddle
<div class="slide">
<img src='images/test.jpg' />
<div class="title">Slide 1</div>
</div>
<style>
.slide{
width:100%;
display:table-cell;
vertical-align:middle;
height: 200px; /* you have to make height static */
}
.slide img{
width:100%;
}
</style>
Ok I finally got an answer to my question. Perhaps I was not explaining it correctly but what I initially needed was to make sure the center of my image was vertically centered inside a div. The answer could not be done with just HTML and CSS but javascript needed to be implemented. so here it is CHECK OUT FIDDLE:
<style>
.swiper-container {
width:100%;
}
.slide{
width:100%;
max-height: 200px;
overflow: hidden;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
<script>
$(document).ready(function(){
var imageHeight, wrapperHeight, overlap, container = $('.slide');
function centerImage(){
imageHeight = container.find('img').height();
wrapperHeight = container.height();
overlap = (wrapperHeight - imageHeight)/2;
container.find('img').css('margin-top', overlap);
}
$(window).bind("load resize", centerImage);
});
<script>
I had a very similar problem to you, also for a responsive slider component that I was building.
My requirements:
The slider container must have a 100% width against the viewport and it must have a fixed height.
The images within the slider must stretch to the full width of the slider.
The images must maintain their aspect ratio so they are not distorted.
The images must always be vertically aligned to the middle of the slider container to create a "center crop" effect for any of the image which doesn't fit within the restricted height of the slider container.
I managed to achieve this without the use of any javascript based on principles from the following smashing magazine post: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2
Here is a generic form of my html, without any noise, to illustrate how to solve this problem:
<div class="container">
<img src="http://lorempixel.com/640/480/animals/1" />
</div>
And here is the minimal css required:
.container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 100%;
}
You can see a fiddle of this in action here: http://jsfiddle.net/8kjfasbt/
It's a very basic implementation, focusing on the problem, but you could easily take this and drop it into a slider implementation and add fancy media queries for some extra effect.
You could of course modify the CSS to give the image other dimensions, pixel or percentage, it would still center. :)