I'm not sure how to add a semi-transparent color overlay that has centered text in it that says "NOW PLAYING" to a fluid thumbnail image when it is active. How do I go about doing this?
Centering the text vertically won't be so easy, but you can get 95% of the way there with a relatively positioned wrapper div and a CSS pseudo class: http://jsfiddle.net/ChrisLTD/FWtA3/
HTML:
<div class="thumbnail active"><img src="http://placekitten.com/300/300"></div>
CSS:
.thumbnail { position: relative; display: inline-block; }
.thumbnail.active:after { content: "NOW PLAYING"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; text-align: center; color: #fff; font-weight: bold; }
.thumbnail img { display: block; }
Related
I am trying to have a number of circles that have background images and texts side by side. And I want when hovering over the circles the opacity of the image to change and also the text to disappear. Also, I don't want the underline sign for links to be shown. But I have a number of problems.
Here is my CSS code:
.ccont {
display: inline-block;
margin: 10px;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
justify-content: center;
align-items: center;
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(http://deepchains.com/images/team.png);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.2;
}
.circle__text {
padding: 1px;
background-color: none;
}
.circle:hover:after {
opacity: 1;
}
.ccont:hover {
font-size: 0;
}
and here is the HTML code:
<center>
<div class="circle">This is <br>Text1</div></div>
<div class="ccont" style="font-weight: bold"><div class="circle">Text2</div></div>
</center>
Here are the issues:
At the beginning when the page loads I see that because of a I get underline links under the images as is shown here:
When I hover over the left image, the text disappears but also the circle gets deformed as is shown here:
Finally when I hover over the right image its text correctly disappears as is shown here:
So here are my questions:
I have been trying to use text-decoration: none; in different places but I always see the underline marks under the images as they have links. How can I remove them?
Why when hovering over the left image, the image gets deformed, but the right image does not get deformed? The only difference is that the left image text has a <br> in it.
How can I have different background images for the left and right circles?
UPDATE:
I applied #chriskirknielsen solution and I get this:
The two images are not aligned correctly. It seems that the underlines are aligned and as two image texts have different heights it pushes two images to different vertical locations. If we can remove the underlines maybe this can be resolved?
It seems your sizing issue occurs because of box-sizing. Adding * { box-sizing: border-box; } at the start of your CSS fixes this issue because the padding from the text is taken into account when calculating the layout.
EDIT: OP's issue seems to be triggered by the font-size, so maybe just make the font transparent is the best idea?
.center {
text-align: center;
}
.ccont {
display: inline-block;
margin: 10px;
}
.cclink {
text-decoration: none;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
background-size: 0 0;
background-position: -9999px -9999px;
justify-content: center;
align-items: center;
overflow: hidden;
display: inline-flex;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.2;
}
.circle__text {
padding: 1px;
background-color: none;
}
.circle:hover:after {
opacity: 1;
}
.ccont:hover {
color: transparent;
}
<div class="center">
<a href="http://www.url1.html" class="cclink">
<div class="ccont" style="font-weight: bold">
<div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">This is
<br>Text1</div>
</div>
</a>
<a href="http://www.url2.html" class="cclink">
<div class="ccont" style="font-weight: bold">
<div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">Text2</div>
</div>
</a>
</div>
PS: Your HTML code is not very compliant to today's standards. The <center> tag is deprecated, and tags should be lowercase.
Having trouble on subsequent divs, they overlap my video that is playing and all I want is just the h1 within the .home-video div to overlay the video. I put a border on the .home-video div and I can see my problem. My div is not the same relative size as the video which changes its size relative to the screen size. How can I get the div that holds the video to match the size of the video?
html
<div class="home-video">
<h1>Travelogger <small>Keep track of the the places you have traveled to </small></h1>s
<video id="v" src="/views/img/Clip27.M4v" type="video/mov" autoplay loop muted>
</div>
css
.home-video {
position: relative;
border: 5px solid black;
text-align: center;
}
.home-video #v {
width: 100%;
height: auto;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.home-video h1 {
font-size: 3em;
color: white;
text-align: center;
padding-top: 1em;
}
Instead of fixing the position of your video, you can just fix the position of your header.
JSFiddle example
HTML
<div class="home-video">
<h1>Travelogger <small>Keep track of the the places you have traveled to </small></h1>
<video id="v" src="/views/img/Clip27.M4v" type="video/mov" autoplay loop muted></video>
<div><p>Subsequent text is below the video</p></div>
</div>
<p>More text here</p>
CSS
.home-video {
position: relative;
border: 5px solid black;
text-align: center;
}
.home-video #v {
width: 100%;
height: auto;
position: relative;
z-index: -1;
}
.home-video h1 {
font-size: 3em;
color: white;
text-align: center;
padding-top: 1em;
position:absolute;
top: 0;
left: 0;
}
I'm developing a responsive site and I have an issue that I've never tought I could have It xD
I have an image inside a div wrapper... and just want to put an icon font with :after selector when that wrapper/img has one class...
Trouble comes on z-index, for z-index works I need to "absolute" that img, but if I do that wrapper's height not contains img... and I can not put my :after element relative to img or wrapper well
I have this issue here: http://codepen.io/MrViSiOn/pen/VYpedg
* {
box-sizing: border-box;
}
div {
float: left;
width: 24%;
height: auto;
margin-right: 1em;
border: 1px solid blue;
padding: 1em;
position: relative;
overflow: visible;
}
img {
max-width: 100%;
border-radius: 50%;
padding: 15px;
border: 1px solid #aaa;
z-index: 10;
position: absolute;
}
div:after {
content: "\e60c";
position: absolute;
color: #234;
font-family: "Nubelo";
bottom: 0;
left: 45%;
font-size: 2em;
z-index: 1;
}
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/d53e6aab62/Nubelo/style.css">
<div>
<img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
<div>
<img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
Thank you, If you need more information, just tell
Thanky you Marcel Burkhard...
I didn't know that using position:relative enables z-index.
That's the answer!
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I'm trying to align a text, horizontally and vertically, inside a div box (with background color) but I'm not being able to do it.
I've searched online and margin: auto, text-align: center aren't doing the work.
Any tips?
Check FIDDLE.
HTML
<div id="services"><div class="holder container clearfix">
<div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
<div class="bgprice"><span class="price">10€</span></div>
</div></div>
CSS
#services .holder .bgtop{
background-color: #27ae60;
height:50px;
width:200px;
z-index: 1;
}
#services .holder .bgprice{
height:50px;
width:90px;
background-color: #272727;
z-index: 1;
}
#services .holder span.top{
color: white;
font-style: italic;
font-weight: bold;
font-size: 1.000em;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
#services .holder span.price{
color: white;
font-style: italic;
font-weight: bold;
font-size: 1.500em;
z-index: 2;
text-align: center;
}
Here is a common approach used for vertical/horizontal centering.
BASIC EXAMPLE HERE
div {
background: red;
width:100px;
height: 100px;
display:table;
}
div > span {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Basically, the parent element's display is changed to table. Add in a child element, in this case a span element to wrap the text. The span should have the properties display:table-cell/vertical-align:middle for vertical centering. Then text-align:center is simply for horizontal centering.
Here is an example using the styling you had.
You can change just your CSS to this (no HTML changes):
div{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
text-align: center;
line-height: 100px;
}
The text-align is self-explanatory. The line-height forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.
JSFiddle
There are different ways. Here is one:
HTML:
<div>
<span>magix!</span>
</div>
CSS:
div {
text-align:center;
display:table;
}
span {
display: table-cell;
vertical-align:middle;
}
Fiddle
I'm trying to overlap images in css. They are both aligned in the center but one is below the other one. I tried z-index'ing which is fine with position: absolute; but if I do that then I lose my centering.
Issue:
The dots are supposed to be over the phone.
My HTML:
<div class="content-top"><div class="cwrap">
<motto>Become Famous On Vine.</motto>
<img id="phone" src="./images/phone.png">
<img id="dots" src="./images/dots.png">
</div></div>
My CSS:
.cwrap {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.content-top {
background-color: #00b589;
height: 650px;
width: 100%;
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
.content-top motto {
display: block;
width: 100%;
text-align: center;
padding-top: 15px;
color: #FFF;
font-size: 60px;
font-family: "Source Sans Pro ExtraLight";
}
#phone {
z-index: 999;
}
#dots {
z-index: 1000;
}
.content-top img {
margin-left: auto;
margin-right: auto;
position: relative;
display: block;
}
Try this. position: absolute;, top: 0;, left: 0;
The the red div is semi-transparent to reveal the blue div below.
Now, if you want to center these in the middle of the page, <div class="container"> use css: margin: 0 auto;.
Link to example: jsFiddle
Use on #phone and #dots elements these css attributes: position, z-index, top, and left.
Use position: absolute the upper layer, and the top and left to place the upper layer to the correct location. Use z-index to specify the layer, lower value is backer, bigger value is upper.