I have two divs. One div contains an image, and the other will contain a text caption that will be layed over the image.
How can I make the caption div width be equal to the image div in a fluid design?
The page is designed using a fluid layout and thus the image will can size with the browser size is changed.
<div id="captions">Captions</div>
<div id="image"></div>
Is there a way to do this in CSS?
You could put both elements into your div and then set the width
<div id="yourdiv">
<img id="yourimg" src="" />
<p class="yourtext">Here some Text</p>
</div>
and then set the width of .yourtext
.yourtext {
width: 100%;
}
FIDDLE
We may inverse the situation as follows:
HTML
<div id="captions">
Captions..
<div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>
CSS
#captions{
background: #000;
color:#fff;
/* width:100%;*/
display:inline-block;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image{
width: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image img{
vertical-align: bottom;
}
This is a DEMO
Related
When I try to change the height of an image's parent div dynamically, the width changes proportionally in Chrome. However, this expected behavior is not working in Safari.
HTML:
<div class="content">
<div class="imagee-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
</div>
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/>
<button id="2">Increase height</button>
CSS:
div {
height: 100px;
float: left;
background: red;
}
img {
max-width: 100%;
max-height: 100%;
}
JS (to test dynamically increasing height)
$("#2").click(function() {
$("div").css("height", "+=5");
});
Here's a fiddle to play with:
http://jsfiddle.net/MNL29/53/
What am I doing wrong?
For me, it works like this:
$("#2").click(function() {
$("div").css("height", "+=5");
});
html,
body {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100px;
background: red;
}
.image-wrapper {
display: inline-block;
}
img {
max-width: 100%;
max-height: 100%;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"
/><img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg" />
<br />
<button id="2">Increase height</button>
</div>
Or see in JSFiddle: http://jsfiddle.net/6e6zpetd/
Also updating to change the image size instead of the container size works. So, instead of having the image stretch to fill the div size (which the width of the div isn't changing so it makes some sense that the width of the image wouldn't change either), you can change the image size and have the div stretch to contain the image, like so:
http://jsfiddle.net/jy8xwhj3/
$("#2").click(function() {
$(".image-wrapper img").css("height", "+=5");
});
.content {
overflow: hidden;
font-size: 0;
}
.image-wrapper {
float: left;
}
img {
height: 100px;
max-width: 100%;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="2">Increase height</button>
<div class="content">
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg"> </div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg">
</div>
<div class="image-wrapper">
<img src="http://www.digital-photography-school.com/wp-content/uploads/2010/10/bird-photography-feeders.jpg">
</div>
</div>
For those who, same as me, cannot change the image height directly (as in accepted answer) and have to change the height of the container, there is a solution. Not and elegant one, but it works.
Safari actually knows how to render it correctly, it just does not "realize" when it should rerender it. After the height modification, if you change any css property that potentially can affect the element's box, it forces a render and it takes the new height into an account.
Just create a dummy class with for example max-width:100% and each time the height is updated, toggle the class on or off (easily done with jQuery .toggleClass). Content gets rerendered, everyone is happy.
If someone know the mechanism / issue behind it, I am curious.
I want to create a vertical slider using jQuery and CSS. Here is my code:
HTML & JavaScript
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
<img src="http://malsup.github.io/images/beach5.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
<button id="prev3">∧ Prev</button>
<button id="next3">∨ Next</button>
</div>
CSS
.slideshow {
margin: auto;
position: relative;
overflow: hidden;
height: 200px;
}
.slideshow img {
width: 100px;
height: 100px;
padding: 2px;
}
div.responsive img {
width: auto;
height: auto
}
.cycle-pager {
position: static;
margin-top: 5px
}
JSFiddle
However, it's showing only two images. I want to show 3 or four images.
I also have a CodePen, but it's showing only one slider text.
How can I change and make it 2 to 3?
If you set the height of .slideshow to 312px this should do the job.
See here.
Or even easier, set the data-cycle-carousel-visible=X to the desired amount X of pictures shown. For example data-cycle-carousel-visible=3
I have a div width that resizes according to the browser width, right now it is set to 80%.
What I'm trying to accomplish is depending on the image size, I would like the image to take up the whole div width. If it's a small image, keep image size and center.
In my fiddle, any image width over 800px should start from the right and expand according to the div re-size. It should always touch the right side and expand with the div width.
If the image width is smaller than or equal to 500px, it should stay it's size and resize according to div but stay in middle of div only.
The problem is, I'm not sure how to only affect certain images, I would like a solution that detects the image size because the images might switch.
.parent{
border:1px solid purple;
height:100%;
width:80%;
float:Right;
}
.child{
border:1px solid red;
height:100%;
background:gray;
text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
width:100%;
background:orange;
}
img{
width:auto;
height:100%;
width:100%;
}
<div class="parent">
<div class="child">
<div class="image-wrapper">
<img src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="https://em.wattpad.com/62f9f1c9de49ad97d7834b1e58e16a99eb2dc3c7/687474703a2f2f6170692e6e696e672e636f6d2f66696c65732f7363525a66707a54694d7a4d48484e586b7247575277674b6878726537617531666736413834472d684c484c616c7271302d6f4152524f6f525a6e55387076415a41637a545a6b4c6442476f6144496336507834395030744245426d4a646e382f50696b616368752e66756c6c2e313435323733332e6a7067?s=fit&h=360&w=360&q=80" alt="" class="child-img">
</div>
<div class="image-wrapper">
<img src="http://vignette3.wikia.nocookie.net/scratchpad/images/0/02/Pikachu.gif/revision/latest?cb=20150217015901" alt="" class="child-img">
</div>
</div>
</div>
Try using jQuery to detect the image's size.
$('.child-img').each(function() {
if ($(this).width() > 800) { $(this).addClass('right'); }
else if ($(this).width() < 500) {$(this).addClass('center');}
});
And the required css would be:
.child-img.right {
display: block;
max-width: 100%;
}
.child-image.center {
width: auto;
max-width: 100%;
display: inline-block'
}
.parent { text-align: center; }
I think you should be able to place the image in the background of the div and make its width and height percentage values.
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/
I'm using iosslider but can't seem to show just one image in the slider at a time. I'm also trying to center the single image shown. Here is what I have for HTML:
HTML:
<div class = 'iosSlider'>
<div class = 'slider'>
<div class="item">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
My CSS looks like this:
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 300px;
border: solid 1px #ff0000;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
width: 100%;
height: 100%;
}
.iosSlider .slider .item img {
width: auto;
height: 300px;
border: solid 1px #00ff00;
}
I'm basically trying to show just one centered image at a time in the slider. Below is what I currently see. As you can see the image to the right is also shown.
Any idea how I can do this with my CSS?
Try resizing the window and you'll see my issue. I'm running this on a mobile webpage that has 320x480 resolution.
Give the images width/height of 100% and you can also position them absolutely:
.iosSlider .slider .item img {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
border: solid 1px #00ff00;
}
Ok do one thing use javascript or jQuery here to loop through your set of images.
Now add another class to the centered or focused image when jQuery function selects it like <div class = 'iosSlider'>
<div class = 'slider'>
<div class="item current">
<img src="/images/nature1.png" />
</div>
<div class="item">
<img src="/images/nature2.png" />
</div>
</div>
</div>
and when the next image got focus, remove this class "current" from 1st image and apply to 2nd one and so on.
And wrtite css for this class current liek allign: center; margin-left:auto; margin-right:auto; and other necessary css.