I want to have a nice hover effect on some image i made. I want to display a text when the mouse is hover the image. I can get the text working but i would like to have a backgroud to make it more readable.
here is the HTML :
<div class="portfolio-frame">
<div class="portfolio-overflow-hidden">
<img width="420" height="236" src="http://benjaminbinauld.lfdb.fr/files/2013/03/mire-servitel16-9.jpg" />
<div class="portfolio-overlay">
<span class="text-overlay">Click here boy !</span>
</div>
</div>
</div>
And the CSS :
.portfolio-frame {
height: 94px;
width: 165px;
margin-left: 10px;
margin-top: 46px;
z-index:1;
}
.portfolio-overflow-hidden {
height: 94px;
width: 165px;
}
.portfolio-overlay .text-overlay {
display: none;
}
.portfolio-frame:hover .portfolio-overlay {
display:block;
position:inherit;
z-index:999;
background-color: #000;
}
.portfolio-frame:hover .text-overlay {
display:block;
z-index:999;
text-transform: uppercase;
font-weight: bold;
color: #fff;
margin-top: -45px;
}
I make live version here : http://jsfiddle.net/fzKe7/
You need to add position:relative to .portfolio-overlay
See fiddle here
You could also tidy up your css:
.portfolio-frame {
height: 94px;
width: 165px;
margin-left: 10px;
margin-top: 46px;
}
.portfolio-overflow-hidden {
height: 94px;
width: 165px;
}
.portfolio-overlay .text-overlay {
display: none;
position:inherit;
background-color: #000;
position:relative;
text-transform: uppercase;
font-weight: bold;
color: #fff;
top:-45px;
}
.portfolio-frame:hover .text-overlay {
display:block;
}
.portfolio-frame:hover .portfolio-overlay { display:block; position:relative; z-index:999; background-color: #000; }
Change the position to Relative. That should work
Related
I'm trying to edit a website and put the logo in the same line as the navigation bar. The problem is, my logo hides behind the bar. I've tried using float, but with no results. The position of both is good, I just don't know how to make the logo display on top of the navigation bar.
.logo {
display: inline-block;
vertical-align: top;
width: 200px;
height: 50px;
float: left;
margin-left: 80px;
.navigation-bar > a {
float: right;
position: relative;
Thank you for any help!
Try This code for CSS & HTML
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
<div class="header">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Cryptic Concepts" hight="10px" width="200px"/>
<div class="header-right">
Home
News
<a class="active">About</a>
</div>
</div>
this is an example with the Google logo, I got the code from W3 Schools
it looks like this
I'm looking to add a center text title in the middle of my page and it won't show up. Code seems correct, don't see a bug.
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
width:800px;
height:300px;
top: 50%;
margin-top: -150%;
left: 50%;
margin-left: -400px;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
}
You just need to use text-align: center and it should center automatically. BTW I see you are using ids often which is very bad practice. IDs should be used for javasscript selectors while class for css.
.center-text {
text-align:center;
}
.title-text {
// Do css formating here
}
<div class="center-text title-text">
<p class="page-title"> Welcome </p>
</div>
try this
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
<div id="welcome_text_div">
<p id="welcome_text"> Welcome </p>
</div>
#welcome_text_div {
position: absolute;
background-color:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
text-align: center;
width: 800px;
line-height: 300px;
}
You can achieve this with flexbox.
All you need to do to the container is define its width and height (and give it a bg color):
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
}
Then add these three lines to set the flexbox display context, and center it vertically and horizontally:
display:flex;
align-items:center;
justify-content:center;
Then remove all the extra formatting from your inner div.
#welcome_text_div {
background-color:red;
width:800px;
height:300px;
display:flex;
align-items:center;
justify-content:center;
}
#welcome_text {
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 55px;
}
https://jsfiddle.net/k5zve6bf/
I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position.
So when I scroll up or down the box stays at the same height.
But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;
Is there any way how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.
Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.
My code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.ico">
<style>
html,
body {
background-color: #026642;
}
#container {
width: 800px;
margin: 20px auto;
position: relative;
}
#sidebox {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
width: 180px;
position: absolute;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position: absolute;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebox">
Sidebox
</div>
<div id="indexcontainer">
<div id="header">
<img src="images/emte.jpg" alt="logo" width="200" height="100">
</a>
</div>
<div id='content'>
Main text box
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
How it needs to work:
use this CSS...
body {
background-color: #026642;
}
#container {
width: 100%;
}
#container #indexcontainer{
margin-left:23%;
width:30%;
}
#container #indexcontainer #header #sidebox {
background-color: white;
color:red;
padding: 5px;
margin-left:31%;
border-radius: 5px;
width: 20%;
position: fixed;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position:relative;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
for further look at this jsfiddle link http://jsfiddle.net/NJMK6/4/
Hope this help you... thanks
<html>
<head>
<script type="text/css">
#sidebox{
margin:left;
position:fixed;
}
</script>
</head>
<body>
<div id="sidebox">
Sidebox
</div>
<p>
other data to display......
</p>
</body>
Hope this will helps
also you can see this JsFiddle link http://jsfiddle.net/Dn3UH/
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;
}
#container {
width: 100%;
margin: 20px auto;
position: relative;
}
On image you can see 3 pictures, i want them to be hovered with text.
I'm pretty new in all of this CSS thingies. After you hover on 1 of three image text will appear, my problem is that i tried many thing, maybefault lays in position absolute?
HTML:
<div id="imgBackground"></div>
<div id="imgContainer">
<img src="images/coffee_01.jpg" />
<img src="images/coffee_02.jpg" />
<img src="images/coffee_03.jpg" />
</div>
CSS:
#imgBackground {
position: absolute;
width: 100%;
height: 300px;
background-color: rgb(244,244,244); }
#imgContainer {
position: relative;
margin: auto;
width: 980px;
padding: 30px; }
#imgContainer img {
margin: 0px 14px 0px 14px;
width: 295px;
height: 254px; }
Thanks guys but your answers haven't helped me much.
As you see in this code i tried to scretch a bit what i need, but take attention and move your mouse under the imgage on white space, it also hovering. How to fix this problem?
#wrapper .text {
position:relative;
bottom:221px;
left:0px;
width: 300px;
height: 200px;
background: rgba(0,0,0, .4);
text-align: center;
text-height: 50px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
Here's my update:
http://jsfiddle.net/D5UEW/2/
I think this might cause it, any ideas ?
#edit
This code from my page:
.imgContainer {
position: relative;
margin: auto;
width: 295px;
height: 254px;
padding: 30px;
float: left;
}
.imgWrapper .text {
position:relative;
bottom:274px;
top: 10px;
width: 295px;
height: 254px;
background: rgba(0,0,0, .4);
text-align: center;
visibility:hidden;
}
.imgWrapper:hover .text {
visibility:visible;
}
And result on my page:
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
check demo here : http://jsfiddle.net/liccyfuentes/D5UEW/
LOne's answer is correct, but this works without you changing to much.
HTML:
<div id="imgContainer">
<li style="background-image:url('images/coffee_01.jpg')"><p>Some random text here...<p></li>
<li style="background-image:url('images/coffee_02.jpg')"><p>Some random text here...<p></li>
<li style="background-image:url('images/coffee_03.jpg')"><p>Some random text here...<p></li>
</div>
CSS:
#imgContainer {
position: relative;
margin: auto;
width: 980px;
color:#FFF;
padding: 30px;
}
#imgContainer li {
margin: 0px 14px 0px 14px;
width: 295px;
height: 254px;
list-style:none;
background:#000;
}
#imgContainer li * {
opacity:0; /* Visibility: hidden; works too! */
}
#imgContainer li:hover * {
opacity:1; /* Visibility: visible; works too! */
}
Codepen: http://codepen.io/anon/pen/bzIGl
I have a problem I can't figure out in css. At the bottom of an imageslider I have three circles, but they need to be a bit responsive so that everyone on a laptop from 13' till 21' can see them at their exact position. But when I resize the screen, these circles loose their position and will be placed a bit higher or lower. Here is the example I am talking about, you will see when you resize the screen, the circles are not in their original good position, at the bottom of the image.
I am working towards this. The code I have is the following:
CSS
.bxslider {
margin: 0;
padding:0;
}
#bijschrift {
position: relative;
left: 65%;
height: auto;
bottom: 250px;
float: left;
z-index: 9999;
}
#bijschrifthoofd {
z-index: 9999;
opacity: 0.8;
padding-left: 10px;
padding-right: 10px;
background-color: #212121;
}
#bijschrifthoofd span {
width: auto;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
line-height: 45px;
font-size: 150%;
}
#bijschriftonder {
z-index: 9999;
opacity: 0.8;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #212121;
float: left;
}
#bijschriftonder span {
width: auto;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight:100;
line-height: 45px;
font-size: 22px;
}
#cirkelcontainer {
width: 100%;
height: auto;
position: relative;
bottom: 200px;
z-index: 9999;
display: block;
}
.circle
{
display:table-cell;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#00ccff;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle2 {
display:table-cell;
margin-left: 2%;
z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#e05c50;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle3 {
display:table-cell;
margin-left: 10%;
z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#0099cc;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
HTML
<ul class="bxslider" >
<li><img src="fotos/Untitled-5.jpg" title="Funky roots" /></li>
<li><img src="fotos/Untitled-4.jpg" title="The long and winding road" /></li>
<li><img src="fotos/Untitled-3.jpg" title="Happy trees" /></li>
</ul>
<div id="bijschrift">
<div id="bijschrifthoofd"><span>UW SPRINGPLANK NAAR INSPIRATIE</span></div>
<div id="bijschriftonder"><span>En authentieke waterpret</span></div>
</div>
<div style="clear:both"></div>
<div id="cirkelcontainer">
<div class="circle">O</div>
<div class="circle2">IB</div>
<div class="circle3">T</div>
</div>
</body>
</html>
I'm not sure where is the "exact position" of the circles. I'm assuming it's over the image at the bottom, like this:
http://jsfiddle.net/Y65mW/1/
So I changed the circles Html like this:
<div id="circle1" class="circle">O</div>
and the Css so we can use a single circle style definition:
.circle {
position: absolute;
width:80px;
height:80px;
border-radius:40px;
...
}
#circle1 {
left: 60px;
background:#00ccff;
}
You should still add a 'min-width' property to the whole site.
I updated the solution here http://jsfiddle.net/Y65mW/3/embedded/result/
The solution was quite obvious: I had to position the circles to absolute so it wouldn't affect the position of my next divs, and add a 'margin-left: -width px' to it. In this case: "margin-left: -50px;".