I am trying to get a link when hovered to show an image just to the left of the link. I have achieved almost what I want minus I am having an html issue.
Trying to get my redtext class to show up on the backslash on the link that has the rollover effect.
Is there a way around this or better way of achieving this? The link in Question is yaya Photography
The CSS
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span
visibility: visible;
top: -25px;
left: -125px;
}
And here is the html I am struggling to get to work
<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a>
Thanks in advance!
Your problem is that your styles on span are affecting the class="redtext" span also.
A simple way to fix this: you can get rid of the span around your img, and then change the references to span in your CSS to reference img instead.
Related
So I thought it'd be a great idea to add tooltips to my Neocities site, but I seem to have run into an issue I can't find the answer to...
Okay for some ungodly reason my tooltip class isn't working. I assigned my div the class, and the span inside it the tooltiptext class, but it would still just use what I had assigned the body. I only noticed this when the text was still white, when it should've been black, among other things.
Here's the html section:
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
I'm including the header and image parts because I'm desperate and worry the answer lies within one of the miniscule details
here's the stylesheet:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
Once again all copy+pasted from w3schools just to make sure it wasn't me
Like I said, the text of the tooltip-assigned div still has white text, and nothing from the tooltip class...
Either the body is overriding my class, or there's something going on with the class itself that's stopping it from working.
I don't know if this helps, but I have assigned a class to my body, which works perfectly fine. I'm wondering if there's something going on with it? I mean, it shouldn't, because I have another page using said class, along with divs using other classes that work perfectly fine!
.door {
margin: 0 auto;
background-image: url("https://64.media.tumblr.com/1adbeafb3ca992a7681ede48ddedcbbd/d5886a952040c00b-9b/s250x400/a917bb1772111a1460eac4922c0502e0ba860bd1.jpg");
/*position: relative;*/
width: 600px;
height: 900px;
text-align: center;
}
I apologize if I'm not making much sense, I'm not super familiar with certain html and css terms.
In this snippet based on your code, the tooltip text is black:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
body {
background-color: #fbb291;
color: white;
font-family: Verdana;
}
<h1>please god ignore the background, I haven't found a good one yet</h1>
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
<div class="tooltip">
<p>this is literally copy+pasted from w3schools what the actual fuck-
<span class="tooltiptext">wait a minute this should have black text why isn't the class working</span></p>
</div>
If you're using other libraries with their own CSS or are deploying this on a third-party website, there could be a namespace collision. You can check what styles are applying to an HTML element using the Chrome DevTools or similar tools in other browsers. Here is a guide for doing this in Chrome: https://developer.chrome.com/docs/devtools/css/overrides/
How can I add a short line below link ? The line should be visible only on hover.
I tried with border-bottom, but that way the line is 100% of the link width and I want the line to be shorter than the link .
Here is a example image of the effect that I try to make.
You can try using ::after pseudo element:
a {
position: relative;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
left: 25%;
right: 25%;
bottom: 0;
border: 1px solid black;
}
<a href='#'>Demo Link</a>
This is something I just thought of, check it out see what you think. So we use :after and create a line under the text. This only works if the parent has a width (for centering).
HTML:
<div>Test</div>
CSS:
div {
width: 30px;
}
div:hover:after {
content: "";
display: block;
width: 5px;
border-bottom: 1px solid;
margin: 0 auto;
}
DEMO
Updated CSS:
div {
display: inline-block;
}
Not sure why I didnt think of this but you can just use inline-block to get it to center without the parent having a width.
DEMO HERE
Here is a link using the same method, just incase you got confused.
DEMO HERE
So I have now be told I should even point out the most obvious thing so here is an update just for the people that don't know width can be a percentage.
width: 70%;
Changed the width from 5px to 70% so it will expand with the width of the text.
DEMO HERE
Edit:
Ruddy's solution has the same result and is more elegant so based on that, I used it recently with addition of transition, making it a bit more eye catching and I thought it would be useful to share here:
a {
display: inline-block;
text-decoration:none
}
a:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
a:hover:after {
width: 90%;
}
jsfiddle link
(Original answer below)
Check this i just came up with, playing in the fiddle:
<a class="bordered" href="#">I am a link, hover to see</a>
a.bordered {
text-decoration:none;
position: relative;
z-index : 1;
display:inline-block;
}
a.bordered:hover:before {
content : "";
position: absolute;
left : 50%;
bottom : 0;
height : 1px;
width : 80%;
border-bottom:1px solid grey;
margin-left:-40%;
}
Depending on the percentages, you may play with a.bordered:hover:before margin and left position.
Simply use this class:
.link:hover {
background-image:url("YOUR-SMALL-LINE-BOTTOM.png")
}
like this, the line will appear when you hover over the element. And you can specify in the image, how small or big the line has to be.
Try creating another Div for border. And adjust the width of that div according to your choice. I hope this will help.
what about this?
a {text-decoration:none;position:relative;}
a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}
check this fiddle for more: http://jsfiddle.net/h7Xb5/
use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines.
<svg id="line "height="40" width="40">
<line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>
I know this question has been asked a hundred times and I have read every last one of them.
I have an image that is also a link. When the image is hovered it shows a new image and I have a small paragraph description I would like to pop up next to the image when the link is hovered over as well. Simple, right?
What i'm doing makes sense to me, and is the answer to this question. What am I doing wrong? This seems very straightforward.
How to show text on image when hovering?
I will paste my relevant code. Comparing to the posted link answer, I have the class project1 instead of imgWrapper and novelDescrip instead of imgDescription
HTML
<div class="project1">
<img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" />
<p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p>
</div>
CSS
.project1 p {
width: 25%;
margin: 20px 15px 0 0;
float: right;
}
.novelDescrip {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility opacity 0.2s;
}
.project1:hover .novelDescrip {
visibility: visible;
opacity: 1;
}
EDIT
Here is my problem now, the text hides and reveals but the hover is activated anytime my mouse is hovering in the area enclosed by the rectangle I drew on this image. Any ideas on why this is happening?
You don't need the the positions. top:0;left: 0; with absolute positioned div will always show up on top left corner of the browser. also added display:inline for the novelDescrip for the div to show-up next to the image.
.project1 p {
width: 25%;
margin: 20px 15px 0 0;
float: right;
}
.novelDescrip {
position: absolute;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility opacity 0.2s;
display:inline;
}
.project1:hover .novelDescrip {
visibility: visible;
opacity: 1;
}
Hope this is what you are looking for.
My be this will solve your problem
img {
height:30%;
width:30%;
}
.project1 p
{
width: 65%;
float: right;
display:none;
margin-left:5px;
}
.project1:hover .novelDescrip
{
display:block;
}
Live Demo