How can I display an image or text whenever I hover over an image? Can you guys help me?
An example:
This actually isn't complicated at all... Use a similar HTML structure as below and just change the display property of the span on hover.
http://jsfiddle.net/kkxfk/2/
<ul>
<li>Link Title<span>Link Desc.</span></li>
</ul>
Use absolute positioning to position the span where you want it.
ul li a span {
display: none;
}
ul li a:hover span {
display: block;
position: absolute;
}
i used it with my own idea and get fully satisfied ,you have to make 2 images, first non-texted and second with your text and hower on them..... try it.....
<style type="text/css">
.leftPan{width:200px; float:right;; margin-top:2px}
#c1 {
margin:6px;
border: thin solid black;
width: 200px;
height: 200px;
background: url(1.jpg) no-repeat;
display: inline-block;
}
#c1:hover {
background: url(2_photo.jpg) no-repeat;
}
</style>
Use a background-image on the a element.
You can then control when it's visible with css
a:hover {
background-image: url(url/to/img);
}
Like this
html
<nav>
Räätälöity-toimitus
<img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" />
</nav>
css
nav {
position: relative;
display: inline-block;
}
a {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
line-height: 7;
}
a:hover {
background-image: url(http://placehold.it/50x50/E8117F/E8117F/);
background-repeat: no-repeat;
background-position: top right;
}
http://jsfiddle.net/UpGKf/
Related
I am experiencing an issue when I start scrolling down and reach the point when the sticky nav becomes visible, it seems to create a duplicate of the background from header and makes header jump, but it is supposed to move to the next section. Is it CSS or JS related issue?
Please see entire included code:
https://codepen.io/pipistrellonetopier/pen/yXLGjo
CSS code
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
z-index: 9999;
}
.sticky .main-nav { margin-top: 22px; }
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
padding: 14px 0;
color: #f0f0f0;
font-size: 100%;
}
.sticky .logo {
display: block;
height: 29px;
margin: 15px 0;
}
Thank you
Peter
Give the following hyperlink display:inline-block and it will stop jumping:
<img src="resources/css/img/app-store-btn.svg" alt="App Store Button">
I am styling a hovered anchor by applying content with the :after pseudo attribute, which adds a border underneath:
a:hover {
position: relative; }
a:hover:after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid #a5cf4c;
margin-top: 0.5em; }
This works fine, but there are also some anchors around images, and I don't want the border under them. For CSS this would only work with the non-existent parent selector a:after < img. I tried solving it with jQuery, but
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. See Access the css ":after" selector with jQuery.
I looked some solutions on SO without the parent hurdle, but I can't get anywhere with this. Anyone?
You could add the after with a class.
$('a:not(:has(img))').addClass('after-affect');
a:hover {
position: relative;
}
a.after-affect:hover:after {
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 1px solid #a5cf4c;
margin-top: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Anchor with text -->
test
<!-- Anchor with image -->
<a href="#">
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/>
</a>
I'm making a slide oriented website, similar to a how a parallax site would operate, but so far no js, just css, and obviously no delayed scrolling because there is so far no js.
I am working on the first two slides. On the first slide I have my header and nav at the top, an empty section that was used for an affect with css that uses gradient and transparency and a picture that covers the viewport.
On the second slide, I have a section that represents all of slide2, which contains a different picture that covers the viewport, and some text that's identified by its own div and has a background color and text.
Here's the problem. I was able to get the background-color to stay fixed by using background-attachment and the background-position: top-left of the screen, height: 100%; and width: 15%; This keeps the background from scrolling, but this does nothing for the text.
I need to inhibit the text from scrolling as well, so that its position on the background doesn't change. So instead of the text scrolling onto the background, it's more like a curtain rising and revealing the text underneath.
I've tried position:fixed, but this ruins the transparency affect of the empty section on slide 1, and for some reason ignores any z-index I give it and remains on top of any subsequent slides (oddly, it obeys the z-index of the header, the empty section and the img that make up slide one).
Can I do this with css? I don't know js yet, but I'm learning it, and I know its used often for scrolling affects. So if the only fix is js, I'm not against using it, I just won't understand it atm.
Here is the simplified code:
HTML5
<html>
<head>
</head>
<body>
<div id="headerContainer">
<div id="containerRow">
<header id="home">
<img id="logo" src="images/logo/MASKAUTONOMY.png" alt="Logo" style="height:75px; margin:25px 0px 0px 25px; padding:0;">
</header>
<nav>
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
</ul>
</nav>
</div><!--End containerRow-->
</div><!--End table headerContainer-->
<section class="ribbon">
</section><!--Section left blank to make ribbon with gradient affect-->
<Section class="slide1">
<h1>Company Slogan</h1>
</section>
<section id="about" class="slide2">
<div id="slide2Text">
<h1><span>Mask</span> Autonomy</h1>
<p class="companyInfo">Some stuff
</p>
<p> some more stuff.
</p>
</div><!--End of slide2Text-->
</section>
<section id="services" class="slide3">
<ul>
<li>List of things we do
</li>
<li>More things we do
</li>
</ul>
</section><!--End of slide3-->
</body>
</html>
css
body {
padding: 0px;
}
#headerContainer {
height: 10vh;
width: 100%;
margin: 0px;
padding: 0px;
display: table;
position: relative;
z-index: 999;
background-color: #e1e3e9;
}
header {
display: table-cell;
}
nav {
margin: 0px;
padding: 0px;
display: table-cell;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
nav ul li {
margin-right: 0px;
padding-right: 25px;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 1.2vw;
font-family: arial;
}
nav ul li:last-of-type {
margin-right: 47px;
padding: 0px;
}
.ribbon {
position: relative;
height: 4vh;
width: 100%;
background-color: #e1e3e9;
z-index: 998;
}
.slide1 {
color: #e0e0e0;
height: 86vh;
background-image: url(../../Documents/DOCS/Stycorp/Website/Images/bckgrnd.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow-x: hidden;
margin-bottom: 0px;
padding: 0px;
position: relative;
z-index: 997;
}
.slide1 h1 {
position: relative;
top: 60%;
left: 47px;
font-size: 4vh;
}
.slide2 {
position: relative;
height: 100vh;
background: url(images/Charlotte.jpg) no-repeat center center fixed;
background-size: cover;
z-index: 989;
}
#slide2Text {
position: static;
background-color: #7d8e9e;
background-attachment: fixed;
background-position: left top;
height: 100%;
width: 15%;
text-align: center;
font-size: 2.33vh;
}
#slide2Text h1 {
position: relative;
top: 2.5%;
font-weight: normal;
text-transform: uppercase;
}
#slide2Text span {
color: #a9aba5;
font-weight: normal;
text-transform: uppercase;
}
.companyInfo {
color: #e0e0e0;
}
.slide3 {
position: relative;
z-index: 994;
height: 100vh;
}
Ok, maybe not that abbreviated. Sorry. Any ideas how to get the text on slide two to remain on the background-attachement:fixed portion of slide 2 during scrolling without messing up the transparency affect on slide one and allowing slide3 to scroll above slide2?
So I figured it out on my own. Funny, how simple the answer was. All I did was make a second container within the "slide2Text" container that contained the same inline text elements elements, I identified it as "text," and used css to style the background of "slide2Text", and css to fix the text position of "text."
I'm not sure if I like the result as much as I thought I would, but maybe I can use some javascript or css to make the text transition from invisible to visible as the slide scrolls into view.
If anyone wanted to see the code or doesn't understand my answer, just ask and I'll post it. Again, it was a simple fix.
I have a nav bar in a div and I need the nav bar to be fluid. The table that it is in is based on percentage (100%) with a min width of 800px. What I think I need is for the images to be resizable based on the main container size. Each image (home, faq, testimonials...). I want to the image width and height to shrink when the window is resized down to the smallest (800px) so that it will all still fit in one line).
#nav-container {
height: 80px;
padding-left:10px;
overflow:auto;
}
ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul#nav li a {
background-position: left top;
background-repeat: no-repeat;
display: block;
text-indent: -9000px;
position: absolute;
}
ul#nav:hover li a{
background-position: left bottom;
}
ul#nav li a:hover{
background-position: left center;
}
ul#nav li a span{
background-repeat: no-repeat;
display: none;
position: absolute;
}
ul#nav li a:hover span{
display: block;
}
ul#nav li a.home {
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 0%;
}
ul#nav a.custom{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 13%;
}
ul#nav a.faq{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 26%;
}
ul#nav a.testimonails{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 40% ;
}
By giving the "left" a percentage instead of a the distances between the buttons will change when the window is resized. However, I need to have a minimum distance between the buttons so that when the window goes to its smallest (800px) there is still a distance between the buttons, but when the window is maximized the distance isn't too great.
You can set the min-width/min-height and max-width/max-height of elements in CSS.
W3schools - CSS Dimension
eg:
img
{
min-width:150px;
}
You could try using padding or margins to maintain distance between buttons, rather than using 'left'.
CSS Margins and Padding
Please provide a live demo for a more specific solution. I recommend using a service such as jsfiddle.net.
I hope this helps.
I have a lite-javascript run image gallery. The javascript grabs each <img> element in the list and places it as a background in the parent <li> element. Then the CSS styles the thumbnails as small blocks with a defined height/width. A click-event for each <li> object toggles its child’s <img> element’s visibility and adds an “active” class name to the <li>. Using CSS, I'm trying to place the <img> absolutely to make it appear at the same position for each thumb, but it's moving in relation to the thumbs.
Here's the CSS:
#jgal li {
background-position:50% 50%;
background-repeat:no-repeat;
border:solid #999 4px;
cursor:pointer;
display:block;
float:left;
height:60px;
width:60px;
margin-bottom:14px;
margin-right:14px;
opacity:0.5;
}
#jgal li img {
position:absolute;
top:0px;
left:210px;
display:none;
}
And the site: http://www.erisdesigns.net
Thanks in advance for any help!
if you want the <img> to appear at the same position:
#jgal {
list-style: none outside;
margin-top: 30px;
position: relative;
width: 200px;
}
#jgal li {
background-position: 50% 50%;
background-repeat: no-repeat;
border: 3px solid #999999;
cursor: pointer;
display: block;
float: left;
height: 60px;
margin: 0 14px 14px 0;
opacity: 0.75;
position: static; // Need to specify static since you have style li { position: relative; } inside another css file
width: 60px;
}
#jgal li img {
border: medium none;
display: none;
left: 300px;
position: absolute;
top: 0;
}
If you want img to be shown near the thumb - change position: static; to position: relative; for #jgal li {
position:absolute elements base their positioning to the closest parent element with position:relative
If you want the image to be relative to the <li>'s position, all you should need to do is add position:relative; to the #jgal li.
If you want to position it relative to #jgal, you can apply the position:relative there instead, and make sure the #jgal li is position:static (which is default, unless you are overriding it somewhere)