This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
I am trying to overlay text with a white translucent background on an image when people mouse over that image. I found answers containing original type of the following code on here. Now I want to vertically align text to the middle of the image.
Is it possible?
HTML:
<div class="image">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>
CSS:
.image {
position:relative;
width:400px;
height:400px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content: 'Hello';
color: #000000;
vertical-align: middle;
text-align: center;
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background: rgba(255,255,255,0.7);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
If the height of the image (or container) you are using is fixed, as in your example, then you can use a line-height method, as follows for the code in your example:
.image:after {
line-height: 400px;
}
Add that line to the .image:after selector, and it will achieve what you want.
JSFiddle Example
This is more sure and structured to clean spaces.
.image:after {
line-height: 400px;
margin: 0;
padding: 0;
}
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Simple as it may look I need to create a background for a website with a container that would be semi-transparent. If I add opacity: 0.5; inside of the #content I will end up having the entire container, with all the widgets and letters going ghost. What should I do to apply transparency only to the background image? One answer would be to add transparency to the picture inside of PS but still I am curious.
#content .container {
background:url(images/menu_bar.png) left top repeat-y !important;
}
Give this a try:
#content .container {
width: 500px;
height: 100px;
background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}
The 'a' in rgba sets the opacity of the color which is 'rgb'. Of course you can set the values to your liking though. If this helps, click the checkmark ;)
Also, don't forget to set the width and height of the image.
One way around the issue is using the position attribute and the z-index attribute. The element you want to be transparent will be the one underneath and then the opaque content will be positioned on top of it.
example:
#transparent-box {
position: absolute; top: 10px; left: 10px;
z-index: 1;
}
#opaque-content {
position: absolute; top: 20px; left: 20px;
z-index: 2;
}
caveat:
When you use this method, you have to bear in mind the indentation/padding you want your content to have and then position it appropriately.
Hope that helps.
You have an interesting problem - the likes of which always have interesting solutions. I'm a big fan of CSS myself and I've tried to mimic the behaviour you need with a few CSS properties here : http://jsfiddle.net/Tax4w/
However, you can always tweak it to suit your needs if this is not exactly what you'd need.
Note: It does look the first time that the text is transparent as well but if you notice carefully it is not
HTML:
<div class="container">
<div class="inner-container">
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
</div>
</div>
CSS:
.container{
width:500px;
height:500px;
background-color:#eeeeee;
position:relative;
}
.inner-container:after{
content:"";
background: url('http://placekitten.com/500/500') left top no-repeat;
width:500px;
height:500px;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
}
.inner-container{
width:500px;
height:500px;
}
p{
font-size:20px;
}
You can do something like this:
HTML
<div class="wrapper">
<div class="transparent"></div>
<div class="content">Text goes here</div>
</div>
CSS
.wrapper {
position: relative
}
.transparent {
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
height: 100px;
width: 100px;
}
That will separate out the background opacity and the content opacity. The absolute positioning will ensure that the transparent div covers the entire parent div. Hope this helps!
It regularly occurs that I want to center a css box inside another one both vertically and horizontally. What's the simplest way to do so that satisfies the following constraints?
The box should be precisely centered, not approximately.
The technique should work in modern browsers and in IE versions back to 8
The technique should not depend on explicitly knowing the width or height of either the centered content or the containing box.
I generally know the container is larger than the content, but supporting larger content (which then overflows symmetrically) would be nice...
The underlying content of the container must still be able to respond to clicks and hovers except where obscured by the centered content
I currently use 4 (!) nested divs to achieve this, with css along the following lines:
.centering-1 {
position:absolute;
top:0; left:0; right:0; bottom:0;
text-align:center;
visibility:hidden;
}
.centering-2 {
height:100%;
display:inline-table;
}
.centering-3 {
display:table-cell;
vertical-align:middle;
}
.centering-content {
visibility:visible;
}
You can see this in action as a jsbin snippet.
However, this approach, while workable, feels like extreme overkill due to the large number of wrapper divs, and it doesn't work with content that's larger than the container. How can I center things in CSS?
Horizontal centering is easy:
.inner {
width: 70%; /* Anything less than 100% */
margin-left: auto;
margin-right: auto;
}
But vertical centering is a little tricky. The best technique for modern browsers is to combine inline-block and a pseudo elements. This originates from "Ghost element", the last technique at http://css-tricks.com/centering-in-the-unknown/. It sets adds a pseudo-element and uses inline-block styles get the centering.
The CSS:
.outer {
height: 10rem;
text-align: center;
outline: dotted black 1px;
}
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
width: 10rem;
display: inline-block;
vertical-align: middle;
outline: solid black 1px;
}
An example on Codepen: http://codepen.io/KatieK2/pen/ucwgi
For simpler cases, the following may be good options:
For single lines of content, you can do a quick and dirty vertical centering job on the text within an element by using line-height larger than your font-size:
.inner {
border: 1px solid #666;
line-height: 200%;
}
The solution with widest support is to use a non-semantic table. This works with very old versions of IE and doesn't require JavaScript:
td.inner {
vertical-align: middle;
}
And here is simple solution for known height elements (which could be in ems, not px):
.outer {
position:relative;
}
.inner {
position: absolute;
top:50%;
height:4em;
margin-top:-2em;
width: 50%; left: 25%;
}
You can get by with 2 fewer elements. Anything less than this is going to require things that IE8 (and IE9) doesn't support.
http://cssdeck.com/labs/0ltap96z
<div class="centering-1">
<div class="centering-2">
<div class="intrinsically-sized-box">
<p>You can put any content here too and the box will auto-size.</p>
</div>
</div>
</div>
CSS:
body {max-width:750px;}
.generalblock {
margin-top:2em;
position:relative;
padding:10px;
border:20px solid cyan;
font-size: 18px;
}
.centering-1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
visibility:hidden;
display: table;
width: 100%;
}
.centering-2 {
display:table-cell;
vertical-align:middle;
}
.intrinsically-sized-box {
visibility:visible;
max-width:300px;
margin: 0 auto;
background: yellow;
position:relative;
border:1px solid black;
}
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}