I am on the process in learning css.
I am trying to display the image in the middle of the screen upon user hover their mouse in the gallery.
however, the image hover within the image itself.
this is my code.
jsfiddle.net/y9w5ym72/1/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.thumbnail:hover img{
border: 1px solid transparent;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
width:70%;
height: auto;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
First point is you need to hide the first image. So that only you can see the second one. Second point is no need position:absolute, left:-1000px; styles for the inside span.
.thumbnail:hover > img{
border: 1px solid transparent;
display:none;
}
.thumbnail span{
/*position: absolute;
left: -1000px;*/
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
DEMO
you have to use position :absolute to achieve that fiddle
.box:hover{position:absolute; top:38%; left:38%; z-index:200;}
Related
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I've looked at various solutions to this and can't seem to get anything to work. I hope I'm missing something simple. What I want is for a tooltip width to use only what is needed, then wrap when a max-width is reached.
Here's my CSS:
<style>
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
And here's my HTML:
<div class="tooltip">
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
</div>
Blacklist
What happens is it always wraps to fit only the widest word, making the max-width setting meaningless. Any assistance would be appreciated.
The problem is that you're trying to cram the tooltip inside a container with 20px width. It simply doesn't have any wiggle room!
For a solution, move the .tooltiptext out of the .tooltip. The CSS can mostly stay the same.
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
overflow:visible;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover + .tooltiptext {
visibility: visible;
}
<div class="tooltip">
</div>
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
Blacklist
You need to explicitly set a min-width as well:
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
min-width: 100px;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
https://jsfiddle.net/gdL458jo/
I have a CSS tooltip set-up to appear to the right of a link when hovered over, and it is working correctly when the link all appears on one line.
However, if the linked text runs too long and goes onto the next line, the tooltip won't appear to the right of the last word any longer.
This content section of this post is an example of what I'm talking about: http://blog.betbright.com/top-stories/premier-league-tactical-analysis-and-betting-tips-four-things-we-learnt-25th-august/
Some of the links are one on line (working correctly) some are on two lines (not working).
Here is my code for this tooltip:
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
Any help with this would be appreciated.
Thanks,
Paul
Here is how i would do it,
a.CTA {
position: relative;
display: inline;
}
a.CTA span {
position: absolute;
width:110px;
color: #FFFFFF;
background: #00A1E0;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.CTA span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #00A1E0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.CTA span {
visibility: visible;
opacity: 1;
/* left: 100%; */
/* top: 50%; */
margin-top: -4px;
margin-left: 15px;
z-index: 999;
}
I wouldn't use top and left property, they position elements absolutely.
In the case where you have two lines top:50% positions the tooltip between the two lines.
I commented out top/left and adjusted the margin-top.
http://www.w3schools.com/cssref/pr_pos_top.asp
Best
y_s_f
You need to remove height.
a.CTA span{
position: absolute;
width: 110px; /*then make adjustment here */
color: #FFFFFF;
background: #00A1E0;
display: block;
/* height: 30px; */
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
Then the long text will be fit inside the tooltip.
I think you can use float: right; for your tooltip, then display: inline-block;
I am trying to insert a close button on top right of the hover image in CSS.
However the image appear in the middle of the hover image. I am unsure of which area i made a mistake.
jsfiddle
these are my css code , also i have insert them to jsfiddle for my demo
body {
margin: 0;
padding: 0;
background: #EEE;
}
#pagecenter {
background-color: transparent;
width: 1200px;
min-width: 1200px;
height: auto;
min-height: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
border-collapse: collapse;
}
.wrap {
overflow: hidden;
margin: 50px;
}
/*20 for 5 box , 25 for 4 box*/
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
/*border width control*/
.boxInner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
overflow: hidden;
background: #66F;
}
.boxInner img {
height: 100%;
width: 100%;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
/*This hover is for small image*/
.thumbnail:hover img{
cursor:pointer;
border: 1px solid transparent;
}
/*This hide the image that is in the span*/
.thumbnail span{
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width:100%; /* you can use % */
height: auto;
padding: 2px;
}
/*When mouse over, the hidden image apear*/
.thumbnail:hover span{
position:fixed;
visibility: visible;
max-width:600px;
top: 0;
left: 0;
right:0;
bottom:0;
margin: auto;
z-index: 200;
}
.close{
position:absolute;
right:-10px;
top:-10px;
display:none;
z-index:1;
}
.thumbnail:hover span .close{
display:block;
}
you will need to give width and height
JS Fiddle
.thumbnail span .close{
position:absolute;
right:-10px;
top:-10px;
display:none;
width:30px;
height:30px;
z-index:1;
}
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.