so i have an issue, with an image slider i am trying to build..
above is what i roughly want to achieve.
i have the grey box, which is my wrapper, inside of that, i have a smaller boxes with images, that should not be shown outside of the wrapper as shown on the image.
but the images will have a small button on it, which should expand a div, with info on.
how can i achieve this ?
the expanded div, should also follow the div it belongs to when sliding the image slider..
i have a simple markup so far, but i am unable to produce the desired effect..
not looking for you to write my code, but coded working examples or descriptions as to what could help me achieve my goal, would be helpfull.
.carousel-wrapper {
border: 1px solid red;
width: 100%;
height: 180px;
margin: 40px auto;
.carousel-box-wrapper {
overflow: hidden;
width: 50%;
margin:0 auto;
height:200px;
white-space:nowrap;
transition: none;
transform: translate3d(0px,0px,0px);
.carousel-box {
width:100px;
/*width: calc(100% / 4);*/
padding: 0 10px;
display: inline-block;
vertical-align: top;
margin: 30px 25px;
.carousel-subdiv{
background-color:#a00;
height:1000px;
position:absolute;
top:100px;
}
img.carousel-image {
width:100%;
height: 125px;
}
}
}
.carousel-box-wrapper:before {
content: " ";
width: 20px;
height: 100%;
position: absolute;
top: 0;
z-index: 1;
}
}
<div class="carousel-wrapper">
<div class="carousel-box-wrapper">
<div class="carousel-box">
<img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
<div class="carousel-subdiv"></div>
</div>
<div class="carousel-box">
<img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
</div>
<div class="carousel-box">
<img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
</div>
<div class="carousel-box">
<img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
</div>
<div class="carousel-box">
<img class="carousel-image" src="https://placeholdit.imgix.net/~text?txtsize=9&txt=80%C3%97125&w=80&h=125" />
</div>
</div>
</div>
Related
I want a responsive img with text on top. Ive tried several different ways and I semi-get there with a bunch of kinks when I try to make it responsive, so I appreciate if anyone has a simple solution.
JSFiddle
Code snippet demonstration :
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<div class="container">
<h1>Header</h1>
</div>
</div>
You can try this , here is the code
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text within container</h2>
<div class="container">
<img src="abc.jpg" alt="abc" style="width:100%;">
<div class="centered">Centered</div>
</div>
</body>
You can make use of font-size: calc(2vw + 2vh + 2vmin) (tweak around the values to your need) to make text responsive with respect to viewport size :)
.container {
position: relative;
}
.container h1 {
position: absolute;
top: 0;
left: 20px;
font-size: calc(2vw + 2vh + 2vmin);
}
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}
<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<h1>Header</h1>
</div>
Try setting position to absolute or fixed
.img-fluid{
max-width:100%;
height:auto;
opacity:0.4;
position: absolute;
}
HTML:
<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>
CSS:
.banner img{position:relative; width:100%; height:auto;}
.banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
line-height:30px;}
for an image use the concept:
{
display: table;
position: relative;
width: 100%;
height: auto;
}
for text to display on image use the concept
{
display: table-cell;
verticl-align: middle;
position: absolute;
}
and adjust the text on image giving top or bottom or left or right}
use the class img-responsive to not to change the width and height of image in all the views.
I'm trying to create a vertically aligned image, but also have it float left with a 10px padding.
Here is what I have so far:
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footers"></div>
</div>
You can also check out this fiddle.
I can't seem to get the img to float: left. It seems to be centered horizontally. Once the I get the image floated left, I need to float some text to the left side of the image.
UPDATE: Something like this https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168
Add text-align:left into img-container with padding-left:10px;
Like this:
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:left; /* Align center inline elements */
font: 0/0 a;
padding-left:10px
}
try float:lefton the image, then add a div into img-container also floated left with a suitable margin
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" style="float:left;"/>
<div style="float:left;margin-left:10px;">Your Content</div>
</div>
In order to achieve your desired result, you can use the following CSS code:
/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
Setting top: 50% and transform: translate(..., -50%) will center your element vertically.
Setting left: 0 and transform: translate(0, ...) will float your element horizontally to the left.
For optical reference you can check my code work in this fiddle.
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="img-container-2">
<div class="img-cell">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
</div>
<div class="footer"> </div>
</div>
<style type="text/css">
.content {height:300px; background-color:rgb(239, 65, 59);}
.header {height:60px; background-color:rgb(55, 102, 199);}
.img-container-2 {display:table; height:100%; width:100%; text-align:left;}
.img-cell {display:table-cell; vertical-align:middle;}
.headliner {padding:10px; height:50px;}
.footer {height:40px; background-color:rgb(66, 199, 123);}
</style>
img-container text align to left;
text-align: left;
here you code
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
/* Align center inline elements */
font: 0/0 a;
}
Once the I get the image floated left I need to float some text to the left side of the image.
So you will need to align two divs horrizontaly. For this you will need to use display: inline-block for both of them. By using this approach, you will need to put the image inside a div, and the text inside another div.
You could also make a table with the first td containing the text and the second td containing the image. Then float table to left.
Do you need like this,
Html code:
<div class="container">
<div class="header">
<div class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footer">sdfsd</div>
</div>
css:
.content {
height: 100px;
position: relative;
width: 100%;
border: 1px solid black;
background-color: rgb(239, 65, 59);
}
.header {
height: 60px;
background-color: rgb(55, 102, 199);
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
.headliner {
padding:10px;
height:50px;
}
.footer {
height: 40px;
padding-bottom: 0px;
padding-left: 5px;
padding-top: 5px;
background-color: rgb(66, 199, 123);
text-align: left;
}
you can refer a link:https://jsfiddle.net/vpbu7vxu/5/
I would like to have a header image that is centered in the browser window. Within the image I need left aligned text and an icon overlay in upper right corner of image. All of the elements must flow to get as the window resizes and remain center. I'm sure it's simple but I just can't seem to make it happen.
#banner{
position:relative;
display:block;
}
#bannerText{
position:absolute;
top:20px;
left:60px;
}
.header_option_overlay {
position:absolute;
top:5px;
right:0px;
left:420px;
}
<div id="center_me">
<div id="banner" >
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg" width="456" height="190">
<img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15">
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
Here is the jsfiddle
As you can see the image, text, and icon are all left align to the browser window. If I try to center everything text and images do not stay together. How do I make everything center in the window?
You almost have resolved, with one of these two examples you can do it, you choose the one that best suits you.
1- Setting display:inline-block to #banner to allows it to fit the width of its content and text-align: center to #center_me to center the content.
#center_me{
text-align: center; /*to center the content*/
}
#banner {
position:relative;
display:inline-block; /*allows it to fit the width of its content*/
}
#bannerText {
position:absolute;
top:20px;
left:60px;
}
.header_option_overlay {
position:absolute;
top:5px;
right: 5px; /*adjusting to nearly border*/
}
<div id="center_me">
<div id="banner">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg" width="456" height="190" /> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15" />
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
2- Setting a fixed width = to the img width to #banner and using margin: 0 auto to center it.
#banner {
position:relative;
width: 456px; /*setting a fixed width = to the img width*/
margin: 0 auto; /*using margin to center it*/
}
#bannerText {
position:absolute;
top:20px;
left:60px;
}
.header_option_overlay {
position:absolute;
top:5px;
right: 5px; /*adjusting to nearly border*/
}
<div id="center_me">
<div id="banner">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg" width="456" height="190" /> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15" />
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
Noting that if you have an img bigger than the width that you want, just add overflow: hidden to #banner to hidden the overflow part of the img and maybe a desired fixed height if you want.
Is that what you want?
.my-image {
background-image: url(http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg);
width: 456px;
height: 190px;
position: relative;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 50px;
}
.my-image a img {
width: 15px;
height: 15px;
position: absolute;
top: 5px;
right: 5px;
}
<div class="my-image">
<p>Beach's</p>
<p>Mexico</p>
<img src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" alt="">
</div>
For HTML:
<div id="center_me">
<div id="banner">
<img id="back" src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg">
<img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15">
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
For CSS:
#center_me {
width: 50%;
margin: 0 auto;
}
#banner {
position: relative;
}
#banner #back {
width: 100%;
height: auto;
}
#bannerText {
position: absolute;
top: 20px;
left: 40px;
}
.header_option_overlay {
position: absolute;
top: 5px;
right: 5px;
}
hope this helps
I have several images inside a container and I would like the images to be centered horizontally when the browser is resized. Currently, images align with the left edge like left: 0, I want them to overflow outside the left and right edge if container is narrower than the image. I thought margin: 0 auto would work. But it seems it doesn't. Basically this is what I want:
HTML:
<div class="container-fluid main-slide">
<div class="mask"></div>
<div class="cycle-slideshow" style="position: relative;">
<img src="/img/1.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/2.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/3.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/4.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
</div>
</div>
CSS:
.main-slide{
height:520px;
width:100%;
max-width:1920px;
padding:0;
margin:0 auto;
overflow:hidden;
position: relative;
}
FIDDLE
The following trick will center an image horizontally even if that requires pushing the left side outside the container.
.cycle-slideshow {
position: relative;
/* for testing */
margin: 0 auto;
border: 10px solid #FC0;
width: 200px;
height: 200px;
}
.cycle-slideshow img {
position: absolute;
top: 0;
/* fill vertically */
width: auto;
height: 100%;
/* center horizontally */
left: -1000px;
right: -1000px;
margin-left: auto;
margin-right: auto;
/* for testing */
z-index: -1;
}
<div class="container-fluid main-slide">
<div class="cycle-slideshow">
<img src="http://dummyimage.com/800x200/000/fff">
<img src="http://dummyimage.com/600x200/000/fff" style="display: none;">
<img src="http://dummyimage.com/400x200/000/fff" style="display: none;">
<img src="http://dummyimage.com/200x200/000/fff" style="display: none;">
</div>
</div>
<!-- cycle plugin will cycle the images one by one -->
Updated Fiddle that uses cycle plugin
here's a fiddle for you; I think this is what you're looking for. http://jsfiddle.net/qo625xkb/
just added a slide class to your imgs. and...
<div class="container-fluid main-slide">
<div class="mask"></div>
<div class="cycle-slideshow" style="position: relative;">
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
</div>
took a different approach with the full container, center fill.
.main-slide{
height:520px;
max-width:1920px;
padding:0;
overflow:hidden;
position: relative;
border: 2px solid green;
}
.slide {
position: absolute;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
margin-left: 50%;
margin-top: 50%;
}
I'm learning html and css, but I have some troubles.
Right now I'm making a site that has a small images with different w sizes.
The point is that, when you hover on them they show up clickable elements, and I can't get the right position on them.
What I have:
What I want:
Part of code for this:
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="zoom">
</div>
<div class="all">
</div>
<div class="link">
</div>
<div class="info">
</div>
<div class="like">
</div>
</div>
CSS:
.photo img {
float:left;
width:auto;
height:auto;
}
.photo:hover {
display: block;
opacity:0.6;
}
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
http://jsfiddle.net/zzu87/
You need to add some positioning to each image if you use position: absolute. Try something like this:
.photo:hover .zoom {
position: absolute;
top: 50%;
left: 200px;
background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat: no-repeat;
width: 46px;
height: 50px;
background-position: center;
}
This should get you where you want to go. (JS fiddle)
css
.photo {
display:block;
position:absolute;
background-image: url('//placekitten.com/400/300');
background-repeat: no-repeat;
width:400px;
height:300px;
}
.photo>.container {
display:none;
}
.photo>.container>div {
display:inline;
}
.photo:hover>.container {
display:block;
margin-left: 85px;
margin-top: 200px;
}
html
<div class="photo">
<div class="container">
<div class="zoom">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="all">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="link">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="info">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="like">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
</div>
</div>
First float the parent div left and set the position to relative. Then you'll have better control over the positioning of any child elements.
.photo {
float:left;
position:relative;
}
After, padding, margin, bottom, left, right, and top can be used to achieve the specific location desired inside the parent div. Here I used left and top...
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
left:50%;
top:50%;
}
Here is the FIDDLE.
Interesting question. I solved the problem by making more div containers for the photo and its contents. Also, I worked under assumption that your photo images are 400x300. Modify the code as you like! :)
I think the interesting part about my solution is that I used only position: relative; which lifts up the hover menu above your images so it plays together nicely:
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
Thus, most of the horizontal position is accomplished using margin: 0 auto; instead of playing too much with absolute or relative position. Generally speaking, those can be avoided most of the time. It depends.
The result can be also viewed from the following: js fiddle example or from this jsfiddle example if cat images are removed sometime later.
Linking also relevant code below:
HTML:
<div class="photo-container">
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
}
.photo-container {
width: 800px;
}
.photo {
float: left;
width: 400px;
}
.photo, .photo-menu {
width: 400px;
height: 300px;
}
.photo:hover {
display: block;
opacity: 0.6;
}
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
.photo .photo-menu {
display: none;
}
.photo:hover .photo-menu {
display: block;
}
.photo-menu .upper-menu {
background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
background-repeat: no-repeat;
background-position: center;
width: inherit;
height: 200px;
margin: 0 auto;
}
.photo-menu .lower-menu {
width: 280px;
margin: 0 auto;
height: 100px;
}
.photo-menu .lower-menu div {
min-width: 40px;
width: 24.9999%;
height: 40px;
background-repeat: no-repeat;
background-position: center;
float: left;
}
.photo-menu .lower-menu .all {
background-image: url("http://placehold.it/40/ff0000");
}
.photo-menu .lower-menu .link {
background-image: url("http://placehold.it/40/00ff00");
}
.photo-menu .lower-menu .info {
background-image: url("http://placehold.it/40/0000ff");
}
.photo-menu .lower-menu .like {
background-image: url("http://placehold.it/40/c0ff33");
}
Note: I used placehold.it to place dummy images for the icons.
Cheers.