I have list of news items with image, title and date. I want to scale image which I'm able to but it hides the span which has title.
I fixed this issue for Firefox by using -moz-transform-style: preserve-3d; but in other browsers I'm not able to find CSS property which can work with other browsers like IE, Chrome, Safari etc.
.list-w li {
overflow:hidden;
display: block;
float: left;
margin-bottom: 20px;
margin-right: 15px;
width: 315px;
}
.list-w li img:hover {
border: 0 none;
float: left;
margin: 0;
width: 315px !important;
transform: scale(1.05);
z-index:10;
}
.title-span {
-moz-transform-style: preserve-3d;
z-index:100;
color: #000;
display: inline-block;
float: left;
font-size: 11px;
font-weight: bold;
height: 14px;
margin: -24px 0 0;
overflow: hidden;
padding: 5px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 305px;
}
HTML
<div class="list-w">
<ul>
<li>
<a style="text-decoration:none; border:0; display:block;" href="/en/" id="hylTopFour2_0">
<img src=" http://placehold.it/350x150">
<span class="title-span">This is the title of the news</span>
</a>
</li>
</ul>
</div>
Just add position: relative to the .title-span class
Codepen demo
Note:
1) transform-style: preserve-3d; isn't necessary here and is not the issue
2) The real issue here is that the span element has a negative top margin and is being painted below the image.This is due to the rules of stacking regarding non-positioned elements (spec)
In this case it's because inline-level elements (the image here) are painted above non-inline-level elements (the span here)
(see my answer here for more details about that)
3) Setting position: relative on the span causes it to appear on top of the image, because positioned elements are painted above inline-level, non-positioned elements
.list-w li {
overflow: hidden;
display: block;
float: left;
margin-bottom: 20px;
margin-right: 15px;
width: 315px;
}
.list-w li img:hover {
border: 0 none;
float: left;
margin: 0;
width: 315px !important;
transform: scale(1.05);
z-index: 10;
}
.title-span {
-moz-transform-style: preserve-3d;
z-index: 100;
color: #000;
display: inline-block;
float: left;
font-size: 11px;
font-weight: bold;
height: 14px;
margin: -24px 0 0;
position: relative;
overflow: hidden;
padding: 5px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 305px;
}
<div class="list-w">
<ul>
<li>
<a style="text-decoration:none; border:0; display:block;" href="/en/" id="hylTopFour2_0">
<img src=" http://placehold.it/350x150">
<span class="title-span">This is the title of the news</span>
</a>
</li>
</ul>
</div>
Related
There is a block 225px. Inside you insert a picture large size (850px). And she goes outside.
It looks like this:
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
}
.single-slide img {
width: auto;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<div>to place the center of the image</div>
</div>
</div>
</div>
Using slick slider. I want to add dots to control the slider.
When I add the dots they are placed in the middle of the block. It's okay, I understand. But I want to place them in the center of the picture. How to do it?
UPD: The image goes beyond the block, that's right! And I need to do to the dots were at the center of the image, not the block
I see that your dots are in the center of the window.
To do this, your dots list must be inside a container with the image's width.
I think you should enlarge your slider or limit image's width with a max-width: 100%;
if you want to need image in box then change
.single-slide img { width: auto;}
to
.single-slide img { max-width: 100%;}
Updated: The inherit keyword specifies that a property should inherit its value from its parent element [ Source ]. and image can't be a parent element. see this example.
Here is a solution on based on inherit and position on your latest update.
See the html section I have added a class "img-holder" on div which hold the img and add a class "div_center" on div which contain text's.
img inherit width from its parent div class "img-holder". "img-holder" and "div_center" inherit width from parent div class slider.
N.B: if you set the img width auto text will always center of the div class slider.
.content {
display: inline-block;
}
.column {
float: right;
width: 225px;
}
.slider {
border: 1px solid #000;
width: 220px;
padding: 5px;
position:relative;
}
.img-holder {
width: inherit;
}
.img-holder img {
width: inherit;/*width auto default value. The browser calculates the width*/
}
.div_center {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div class="img-holder">
<img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' />
</div><!--./ img-holder -->
<div class="div_center">
to place the center of the image
</div><!--end of txt_center -->
</div><!--./ slider single-slide-->
</div><!--./ column -->
</div><!--./ content -->
Previous: Position absolute for slick-dots class but you dont set any relative position for that. so you need to add position relative to your slide div.
And make the image responsive. I have added responsive property for your image on css section and added border on li for clear view.
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
position: relative;
}
.single-slide img {
max-width:100%;
display:block;
height:auto;
margin:0 auto;
}
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
top:50%;
left:0;
right:0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border:2px solid red;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
right: 0;
bottom: 0;
left: 0;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<ul class="slick-dots">
<li class="active"><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
</div>
</div>
</div>
I'm trying for tag SOLD OUT as shown in below figure
but able to achieve upto certain extend shown in below figure
using following HTML & CSS
<a href="some-href">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 142px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
You need to do a few things:
set the parent's position to relative(the in your case) and overflow to hidden.
set the "sold out"'s width to something that will overflow and the image's height and width to 100% to fill the parent
You'll need the position:relative of the parent so the "sold out" will be aligned to its parent when position:absolute and the overflow:hidden will be applied to it.
.parent {overflow: hidden; position: relative; display: block; width: 200px; height: 200px;}
.parent img { width: 100%; height: 100%;}
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 242px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
<a href="some-href" class="parent">
<img src="http://i.stack.imgur.com/Mmww2.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
https://jsfiddle.net/ivankovachev/snxt61an/
Try this, set backface-visibility:hidden
a{
text-decoration:none;
width:200px;
height:200px;
display:block;
position:relative;
overflow:hidden;
}
a > img{
width:100%;
height:100%;
}
a > .wp-sold-out-strip {
width: 180px;
color: #FFF;
font-size: 13px;
font-weight: bold;
position: absolute;
text-align: center;
background-color: #8760AF;
bottom:20px;
right:-30px;
transform:rotate(-30deg);
-webkit-backface-visibility:hidden;
}
<a href="some-href">
<img src="https://source.unsplash.com/user/erondu">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Here the solution!...
Try this code...
<div class="img-wraper">
<a href="some-href" class="">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
</div>
<style media="screen">
.img-wraper {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid #cccccc;
}
.img-wraper a {
display: block;
position: relative;
}
.img-wraper a img {
width: 100%;
height: 100%;
}
.wp-sold-out-strip {
position: absolute;
bottom: 20px;
right: -30px;
width: 142px;
transform: rotate(-33deg);
text-align: center;
background-color: #8760AF;
color: #FFF;
font-size: 13px;
font-weight: bold;
}
</style>
Here's another answer for you. Fiddle
What I did to set the parent element a position: relative and position: absolute on the banner. You can then more easily align the item with top and left.
It's also important to set the parent to overflow: hidden so that nothing appears to protrude outside your image. Finally, you need to override the default inline behavior of anchor tags so that you can align the banner properly.
I also increased the left padding for the text to make it appear centered.
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 170px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 7px 0 7px 14px;
position: absolute;
top: 107px;
left: -2px;
transform: rotate(-26deg);
}
a {
overflow: hidden;
position: relative;
width: 150px;
height: 150px;
display: inline-block;
}
<a href="some-href">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Just add
height:30px;
line-height:28px;
and change this value:
margin-top: -70px;
Demo (new tag in orange, old in purple), enjoy:
.wp-sold-out-strip {
text-align: center;
background-color: tomato;
width: 142px;
height:30px;
line-height:28px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -70px;
transform: rotate(-26deg);
}
<a href="some-href">
<img src="http://i.stack.imgur.com/Nahj0.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
I've tried vertical-align, display: table-cell, etc everything I could find but I just can't get the text align at the bottom of the list tag...
How would you do it??
remove your float style from the image #port_wrap img and add <br> before <strong>
working example
Please check this fiddle
#port_wrap {
margin-top: 130px;
margin-left: -400px;
margin-bottom: 150px;
width: 950px;
height: 700px;
position: absolute;
left: 50%;
display: block;
padding: 0;
overflow: auto;
}
#port_wrap img {
border-radius: 10px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
box-shadow: 2px 2px 7px #888;
}
#port_wrap ul {
font-family: "돋움",Dotum,Helvetica,sans-serif;
font-size: 16px;
color: #555555;
line-height: 20px;
list-style: none;
}
#port_wrap ul li {
height: 120px;
margin-bottom: 15px;
}
#port_wrap .text{
display: inline-block;
vertical-align: bottom;
}
<div id="port_wrap">
<ul>
<li><img src="https://dl.dropboxusercontent.com/u/142820969/eastasia.png" /><div class="text"><strong>동아시아문화도시 2014 광주; 아시아 무대 담당</strong><br />
<span style="font-size: 13px">2014년 10월 | 광주문화예술회관</span></div></li>
</ul>
</div>
I'm trying to get the bottom of an icon to line up with some text (to the pixel - the lowest pixel of the first S should be at the same height as the lowest pixel of the foler icon) across browsers, but Chrome is always giving me different results.
Fiddle:
http://jsfiddle.net/LrhB7/1/
HTML:
<div class="study-box set-box">
<div class="set-box-title">
<i class="icon-folder-close-alt">
</i>
<div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
</div>
</div>
CSS:
.study-box {
width: 200px;
height: 120px;
margin: 2px;
float: left;
color: white;
text-align: center;
font-size: 15px;
position: relative; }
.folder-box-title > div, .set-box-title > div {
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space: nowrap;
overflow-x: hidden;
display: inline-block;
text-align: justify;
width: 162px !important;
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 20px;
position: relative; }
.set-box-title {
position: absolute;
bottom: 0;
left: 0;
margin-left: 10px;
padding-bottom: 7px; }
This should be what you're looking for: http://jsfiddle.net/W3WW7/1/
<div class="study-box set-box">
<div class="set-box-title">
<i class="icon icon-folder-close-alt">
</i>
<div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
</div>
</div>
Changed:
.folder-box-title > div, .set-box-title > div {
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space:nowrap;
overflow-x:hidden;
display: inline-block;
text-align: justify;
width: 162px !important;
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 20px;
position: relative;
top: 2px; // changed this line
}
Added:
.icon {
vertical-align: text-bottom;
}
Thank you all for your prompt feedback, it has been very helpful. One issue remains: Neither line-height, nor padding seem to be able to center both text that is long enough to wrap around and text that fits neatly on one line in the middle of the picture when applied in a table cell.
Oddly enough, the padding solution provided below by SwDevMan81 works flawlessly when applied to a div, but not a table cell...
I apologize in advance for my naivety; this is my first foray into HTML and CSS.
The code for the table is as follows:
<table border="1">
<tr>
<td class="imgcontainer">
<a href="#">
<img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
<span class="desc">
Very long text that wraps around and is centered properly
</span>
</a>
</td>
<td class ="imgcontainer">
<a href="#">
<img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
<span class="desc">
misaligned text
</span>
</a>
</td>
</tr>
<tr>
<td class="imgcontainer">
<a href="#">
<img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
<span class="desc">
misaligned text
</span>
</a>
</td>
<td class ="imgcontainer">
<a href="#">
<img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
<span class="desc">
Very long text that wraps around and is centered properly
</span>
</a>
</td>
</tr>
</table>
<style type="text/css">
.imgcontainer {
overflow: hidden;
text-align: center;
}
.imgcontainer img {
float: left;
background: #fff;
width: 200px;
height: 200px;
}
.imgcontainer a .desc {
display: none;
font-size: 1.0em;
}
.imgcontainer a:hover {
cursor: pointer;
text-decoration: none;
}
.imgcontainer a:hover .desc {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
background: #DDD;
filter: alpha(opacity=75);
opacity: .75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
position: absolute;
width: 200px;
height: 200px;
}
</style>
You need not apologise for naivete. Vertical Centering is one of the most misunderstood parts of CSS.. and unfortunately, while there is an easy solution - to use the table display properties - they are not supported by IE7 and below..
So some form of hack is necessary for them, what is your support requirements?
The optimal IE solution I have involves a hack to both the HTML and CSS (and extra HTML element is helpful for them)
Here's the code that should work without IE6/7 support:
HTML is as yours above
CSS:
table {
table-layout: fixed;
width: 403px;
border-collapse: collapse;
border-spacing: 0;
}
.imgcontainer {
text-align: center;
padding: 0;
vertical-align: middle;
border: 1px solid #000;
}
.imgcontainer img {
float: left;
width: 200px;
height: 200px;
border: 0;
}
.imgcontainer a {
display: block;
width: 200px;
height: 200px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.imgcontainer a:hover img {
margin-right: -200px;
}
.imgcontainer a .desc {
display: table-cell;
vertical-align: middle;
border-spacing: 0;
border-collapse: collapse;
width: 200px;
height: 200px;
padding: 10px;
background: #cfc;
}
.imgcontainer a:hover .desc {
background: #DDD;
opacity: .75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
Working Example : HERE
and: with optimal IE6/7Support
add an <i></i> element between the img and span in the HTML like this:
<td class ="imgcontainer">
<a href="#">
<img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
<i></i>
<span class="desc">misaligned text</span>
</a>
</td>
Then conditional CSS : (add to a sheet that comes after the main stuff above)
<!--[if LTE IE 7]>
<style type="text/css" media="screen">
.imgcontainer i {
display: inline-block;
width: 200px;
height: 200px;
line-height: 200px;
background: #DDD;
filter: alpha(opacity=75);
vertical-align: middle;
margin-right: -200px;
}
.imgcontainer a .desc {
display: none;
width: 180px;
height: auto;
}
.imgcontainer a:hover .desc {
display: inline-block;
background: transparent;
}
</style>
<![endif]-->
OR - without the extra HTML element or proper vertical centering
If you don't want to add the extra HTML <i></i> element for IE6/7 you could combine the first solution with a top padding solution, which won't perfectly vertically centre the text but should provide a graceful fall-back for IE6/7.
in which case the IE conditional CSS would look like this:
<!--[if LTE IE 7]>
<style type="text/css" media="screen">
.imgcontainer a .desc {
display: none;
padding: 40px 10px 10px 10px;
width: 180px;
height: 150px; /* if adding to top padding, adjust height accordingly */
}
.imgcontainer a:hover .desc {
display: inline-block;
filter: alpha(opacity=75);
}
</style>
<![endif]-->
Update
as per comments, to make this work and retain border-spacing on the parent table you would remove the table CSS
table {
/*
table-layout: fixed;
width: 403px;
border-collapse: collapse;
border-spacing: 0;
*/
}
and then ADD border-spacing: 0; to the a
.imgcontainer a {
display: block;
width: 200px;
height: 200px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
border-spacing: 0;
}
adding the above means the span which is set to display: table-cell; doesn't inherit the border-spacing on the parent table
Working example with border-spacing
here is a live demo:
http://jsfiddle.net/CKRZg/23/
Here is the new CSS:
.
imgcontainer {
overflow: hidden;
float: left;
position: relative;
}
.imgcontainer img {
float: left;
padding: 5px;
background: #fff;
width: 500px;
height: 500px;
}
.imgcontainer a .desc {
display: none;
font-size: 1.2em;
}
.imgcontainer a:hover {
cursor: pointer;
text-decoration: none;
}
.imgcontainer a:hover .desc {
display: block;
text-align: center;
width:500px;
line-height:500px;
background: #111;
filter: alpha(opacity=75);
opacity: .75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
color: #fff;
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 500px;
}
You could also do it with padding. This will handle wrapped text.
.imgcontainer {
overflow: hidden;
float: left;
position: relative;
}
.imgcontainer img {
float: left;
padding: 5px;
background: #fff;
width: 500px;
height: 500px;
}
.imgcontainer a .desc {
display: none;
font-size: 1.2em;
padding: 50% 0;
}
.imgcontainer a:hover {
cursor: pointer;
text-decoration: none;
}
.imgcontainer a:hover .desc {
display: -webkit-box;
display: -moz-box;
display: block;
-webkit-box-align: center;
text-align: center;
background: #111;
filter: alpha(opacity=75);
opacity: .75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
color: #fff;
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 500px;
}
use display:block, display:box is invalid. that will fix horizontal centering.
vertical centering is a bit more tricky since html is not meant to be concerned with the virtical layout of pages, only horizontal.
See: What is vertical-align used for in CSS?
Here is another way. Doesn't work in IE6 though.
CSS:
* { margin:0; padding:0 }
.desc { position:relative; display:inline-block }
.desc img { vertical-align:middle }
.desc span { position:absolute; left:0; width:100%; height:100%; line-height:100px; background:black; text-align:center; color:white; display:none }
.desc:hover span { display:inline-block }
HTML:
<a href="#" class="desc">
<img src="http://www.uploadarchief.net/files/download/troll_face.jpg" width="100" height="100" alt="" />
<span>Description</span>
</a>