I have been trying to add an overlay play icon to my videos which all works however after adding this im getting a weird 1px spacing on the bottom row of my images
When the absolute positioning is removed from (#icon) the images align perfectly - but when added back it adds the weird spacing
Could anybody help with this?
CODE: http://www.codeply.com/go/JC75OR4xpD
HTML CODE:
<div class="instaVideos">
<h1>Short Videos</h1>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11661388_407770589406910_367605487_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11325016_1163164417043690_1908545167_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xtp1/t50.2886-16/1489765_333969910114258_1680134671_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/10706968_601233316654119_1567865956_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/10679292_519402934860781_468618633_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/10665576_441425795996740_1661178998_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10641919_684721938283340_2079757675_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xap1/t51.2885-15/924582_890120924350870_1658010424_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10541299_371884109631916_1548975081_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10538735_664550930296554_1249448005_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="https://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11683107_112731029066100_1538573428_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11386568_1455668744729300_108311835_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10721731_1471532036461241_1447645097_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10724656_765518650158719_1752400817_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
<a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfa1/t50.2886-16/11679305_467034590127593_1579081935_n.mp4" class="html5lightbox">
<img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11429736_699224963557660_1457167025_n.jpg"/>
<img id="icon" src="img/youtubePlayIcon.png"/>
</a>
</div>
CSS:
.instaVideos {
margin:0 auto;
margin-left: auto;
margin-right: auto;
max-width: 800px;
width:90%;
text-align: center;
margin-bottom: 50px;
transition:all .2s ease-in-out;
}
.instaVideos > h1 {
margin:0 auto;
text-align: left;
width:300px;
margin-left: 2%;
font-size: 30px;
font-family: 'raleway';
}
.instaVideos > a > img {
width:150px;
height:auto;
margin-top: 5px;
border:1px solid red;
text-align: center;
}
.instaVideos a:hover {
opacity: 0.7;
}
.instaVideos > a {
position:relative;
}
#icon {
width:auto;
height:30px;
position:absolute !important;
left:35%;
top:0px;
right:0px;
display:inline !important;
}
SOLVED
I fixed this by doing the follwing:
.instaVideos {
position:relative;
}
#icon {
position: absolute;
left:0;
right:0;
top:0;
margin: 0 auto;
}
Maybe this help you: Fiddle
CSS:
.instaVideos > a {
position: relative;
height: 100%;
width: auto;
display: inline-block;
}
#icon {
width:auto;
height:30px;
position:absolute !important;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Related
I have this code inserted into one my blocks.
<div data-content="FOR GIRLS" class="image">
<img src="path_to_image"
alt="" />
</div>
<p></p>
<div data-content="FOR BOYS" class="image">
<img src="path_to_image"
alt="" />
</div>
tryed to link the image to post URL, in this way:
<div data-content="FOR GIRLS" class="image">
<a href="link_to_post"><img src="path_to_image"
alt="" /></a>
</div>
<p></p>
<div data-content="FOR BOYS" class="image">
<a href="link_to_post"><img src="path_to_image"
alt="" /></a>
</div>
but when save the changes image still is not linked nowhere..
This is CSS for image class:
.image img {
width:100%;
vertical-align:top;
height:95%;
}
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:0px 10px;
text-align:center;
background:black;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding-bottom: 5px;
}
.image:hover:after, .image:hover:before {
opacity:1;
}
I dont know what is wrong, and why i cant link image in that way. Some tips?
Try this for html:
<div data-content="FOR GIRLS" class="image">
<a class="wrapped__link" href="link_to_post"> </a>
<img src="path_to_image" alt="" />
</div>
and for css:
div.image {
position: relative;
}
.wrapped__link {
position: absolute;
z-index: 3;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
color: transparent;
}
I have a problem with image descriptions. I have HTML structure like this:
<div class="scrollable-content" data-mcs-theme="dark-thick" style="padding: 0px; overflow-x: auto;">
<ul style="list-style: none; white-space:nowrap; padding: 0px;">
#foreach($projects as $project)
<li style="display: inline; margin: 0px;">
<a href="{!! url($locale.'/projects/project/'.$project->id) !!}">
<img class="project-cover-image" src="/images/{!! $project->cover_image_name !!}" height="250px" width="auto">
</a>
</li>
#endforeach
</ul>
</div>
It creates a nice looking gallery with horizontal scrollbar. But I need to add descriptions to images that will be placed at the bottom of the pictures covering whole their widths and they should have to be transparent to some degree.
The problem is, whatever I do, I either get description that takes 100% width of the page, or it has width of the text inside it.
I have tried doing it with div, span, different combinations of position absolute/relative, everything and I couldn't manage to make it work.
It should look something like this:
How can I do that?
You have two options (wich produce the same result):
1- A div with a image as background, and a subtitle inside this div;
#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
.coverdown {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="image">
<div class="coverdown">Subtitle here with a description.</div>
</div>
2- The image and a subtitle with position:absolute inside a position:relative container;
#container {
width:550px;
height:150px;
position:relative;
}
img {
width:550px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
.subtitle {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="container">
<img src="http://i.imgur.com/HNj6tRD.jpg" alt=img>
<div class="subtitle">Subtitle here with a description.</div>
</div>
use position:relative/absolute
body {
margin: 0
}
.scrollable-content {
padding: 0;
overflow-x: auto
}
ul {
list-style: none;
white-space: nowrap;
padding: 0;
margin:0
}
li {
position: relative;
display:inline-block
}
span {
background: rgba(0, 0, 0, .5);
display: inline-block;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
img {
display: block
}
a {
color: #fff
}
<div class="scrollable-content" data-mcs-theme="dark-thick">
<ul>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/250/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/500/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/400/250">
<span>description</span>
</a>
</li>
</ul>
</div>
basicly, you need relative/absolute as #dippas's answer.
as I advised, use inline-block, so it gets sized by content and will allow easily to position your description.
example below with figure and figcaption.
figure can be wrap in a <a>link displayed inline-block and figure as a block then to avoid a gap underneath.
figure {
display: inline-block;
position: relative;
margin: 0;
}
img {
display: block;
max-height:80vh;height:250px/*snippet demo purpose */
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* makeup*/
background: rgba(0, 0, 0, 0.5);
color: white;
}
/* demo purpose */
div {
white-space: nowrap;
overflow:auto;
}
figure {
white-space: normal;
text-align: center;
}
<div>
<figure>
<img src="http://www.hyperkreeytiv.com/wp-content/uploads/2014/08/IMG_4973.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://4.bp.blogspot.com/-oSEWgZNEopE/TtL8kfGuBzI/AAAAAAAAB6U/b8VSzZaoK3g/s400/action_wolf_1111_photo1.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://1.bp.blogspot.com/-GfOyrk3kZ0w/TewM0BMvbNI/AAAAAAAABM0/KPm3li5Xwko/s1600/alpha+male+Wallpaper__yvt2.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://www.ooyuz.com/images/2015/10/13/1447449028465.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
</div>
I have four fixed div in four corners of my html page.I need to realign the top div from right.About 40 pixels.I tried float,padding-right,right.None of it works for me.Below is my html and CSS code.
.top-bar a{
padding-left:20px;
float:right;
right:50px;
padding-top:7px;
}
.top-bar,.left-bar{
top:0;
left:0;
}
.top-bar i{
text-align:right;
}
.right-bar{
top:0;
right:0;
}
.bottom-bar{
bottom:0;
left:0;
}
.top-bar,.bottom-bar{
width:100%;
height:40px;
background-color: black;
z-index:100;
position:fixed;
}
.left-bar,.right-bar{
height:100%;
width:40px;
background-color: black;
z-index:100;
position:fixed;
}
<div class="left-bar"></div>
<div class="right-bar"></div>
<div class="top-bar">
<div></div>
<img src="images/social-youtube.png" alt="Subscribe Us">
<img src="images/social-link.png" alt="Follow Us">
<img src="images/social-gplus.png" alt="Follow Us">
<img src="images/social-insta.png" alt="Follow Us">
<img src="images/social-pin.png" alt="Follow Us">
<img src="images/social-twitter.png" alt="Follow Us">
<img src="images/social-fb.png" alt="Like Us">
</div>
<div class="bottom-bar">
<center><i class="fa fa-copyright footer">2015 All Rights Reserved Privacy Policy Terms & Conditions</i></center>
</div>
Thanks in Advance
My first guess is that you want 40px of padding to the right of .top-bar.
You can do this by adding the following CSS rule:
.top-bar {
padding-right: 40px;
box-sizing: border-box;
}
The box-sizing property will keep the total width of the block to 100% instead of 100% plus 40px.
Without that, the block would extend to the right and with the padding, it would look like it has no effect.
.top-bar a {
padding-left: 20px;
float: right;
right: 50px;
padding-top: 7px;
}
.top-bar, .left-bar {
top: 0;
left: 0;
}
.top-bar i {
text-align: right;
}
.right-bar {
top: 0;
right: 0;
}
.bottom-bar {
bottom: 0;
left: 0;
}
.top-bar, .bottom-bar {
width: 100%;
height: 40px;
background-color: black;
z-index: 100;
position: fixed;
}
.top-bar {
padding-right: 40px;
box-sizing: border-box;
}
.left-bar, .right-bar {
height: 100%;
width: 40px;
background-color: black;
z-index: 100;
position: fixed;
}
<div class="left-bar"></div>
<div class="right-bar"></div>
<div class="top-bar">
<div></div>
<img src="images/social-youtube.png" alt="Subscribe Us">
<img src="images/social-link.png" alt="Follow Us">
<img src="images/social-gplus.png" alt="Follow Us">
<img src="images/social-insta.png" alt="Follow Us">
<img src="images/social-pin.png" alt="Follow Us">
<img src="images/social-twitter.png" alt="Follow Us">
<img src="images/social-fb.png" alt="Like Us">
</div>
<div class="bottom-bar">
<center><i class="fa fa-copyright footer">2015 All Rights Reserved Privacy Policy
Terms & Conditions</i>
</center>
</div>
I'd like to format my tumbnails so that they form one larger square. Currently they're uncentered (which is my first issue), and have spaces between them. How would I go about centering the overall thumbnails, and then making it so that all the thumbnails would touch and form a square?
.links {
margin: auto;
padding: auto;
width: 100%;
}
img {
margin: 0 0 0 0;
padding: auto;
vertical-align: middle;
width: 100px;
}
h2 {
margin: 15% 0 0 0;
padding: 0 0 0 0;
margin-top: 10px;
margin-bottom: 5px;
font-size: 125%;
text-align: center;
}
<h2>Landscapes</h2>
<div id="links">
<a href="img/landscapes/brs.jpg" title="">
<img src="img/thumbnails/brs.jpg" alt="">
</a>
<a href="img/landscapes/ela.jpg" title="">
<img src="img/thumbnails/ela.jpg" alt="">
</a>
<a href="img/landscapes/farm.jpg" title="">
<img src="img/thumbnails/farm.jpg" alt="">
</a>
<a href="img/landscapes/first.jpg" title="">
<img src="img/thumbnails/first.jpg" alt="">
</a>
<a href="img/landscapes/hf.jpg" title="">
<img src="img/thumbnails/hf.jpg" alt="">
</a>
<a href="img/landscapes/lindy.jpg" title="">
<img src="img/thumbnails/lindy.jpg" alt="">
</a>
<a href="img/landscapes/lp.jpg" title="">
<img src="img/thumbnails/lp.jpg" alt="">
</a>
<a href="img/landscapes/mcafee.jpg" title="">
<img src="img/thumbnails/mcafee.jpg" alt="">
</a>
<a href="img/landscapes/meth.jpg" title="">
<img src="img/thumbnails/meth.jpg" alt="">
</a>
<a href="img/landscapes/nr.jpg" title="">
<img src="img/thumbnails/nr.jpg" alt="">
</a>
<a href="img/landscapes/d.jpg" title="">
<img src="img/thumbnails/d.jpg" alt="">
</a>
<a href="img/landscapes/old.jpg" title="">
<img src="img/thumbnails/old.jpg" alt="">
</a>
</div>
Here's an image of what it currently looks like:
The kind of thing I'm going for:
Just add the following and change .links to #links or set class = 'links' instead of id = 'links'
a{
display: inline-block;
margin: 0px -2.5px;
}
Try to
a, img, div{
display: inline-table;
}
.links {
margin: auto;
padding: auto;
width: 100%;
}
img {
margin: 0 0 0 0;
padding: auto;
vertical-align: middle;
width: 100px;
}
h2 {
margin: 15% 0 0 0;
padding: 0 0 0 0;
margin-top: 10px;
margin-bottom: 5px;
font-size: 125%;
text-align: center;
}
a{
display: inline-table;
width: 100px;
}
Fiddle: https://jsfiddle.net/55cdek2r/
I have two image links that need to be centered with a little shifting.
My problem is that one link cause the other to be unclickable.
DEMO - The right one can't be clicked
HTML:
<div class="my_class" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
css:
#my_id1
{
left: 120px;
}
#my_id2
{
right: 120px;
top: -157px;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img{
border:1px solid red;
}
Here is the modified code:
<div class="my_class" id="my_id1"> <a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2"> <a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
And the CSS:
#my_id1 {
float: left;
left: 150px;
}
#my_id2 {
float:right;
right: 150px;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img {
border:1px solid red;
}
You need to float those containers : http://jsfiddle.net/GbzSQ/5/
Your first div overlaps over the other, so you need to float them and then use margins to position them properly.
.my_class{
float:left;
width:200px;
}
The divs of the links are just on top of each other.
So the mouse does not "see the bottom link".
Try using display inline in the divs with defined width.
I would use some floats or display:inline-block 's.
I made an update of your Fiddle with the Floats.
http://jsfiddle.net/cfknoop/GbzSQ/7/
#my_id1 {
float:left;
}
#my_id2 {
float:right;
}
The wrapper needs to be cleared with an clearfix or something.
Try not to use negative positioning, it's bad practice and will cause issues such as this. Try defining the size of the containing divide, position that, then float the divs within this.
I'll put together a quick fiddle to show you.
http://jsfiddle.net/GbzSQ/23/
And here's the HTML:
<div class="container" id="container">
<div class="my_class1" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" alt="1" />
</a>
</div>
<div class="my_class2" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" alt="2" />
</a>
</div>
</div>
And the CSS:
.my_class2 {
text-align:center;
float: right;
position:relative;
display: block;
margin: 0 auto;
}
.my_class1 {
text-align:center;
float: left;
position:relative;
display: block;
margin: 0 auto;
margin-right: 20px;
}
img{
border:1px solid red;
}
.container {
width: 440px;
height: 200px;
display: block;
margin: 0 auto;
}