I'm trying to make a webpage where when the user hovers over the text, an image appears. I found a working code, but it showing as a link and I don't want it to. My idea is to have a list of items and when the user hovers over each one, a new image appears.
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }
<div class="hover_img">
flippe flute<span><img src="//picsum.photos/200?c=1" alt="image" height="200" /></span><br>
pottery flute<span><img src="//picsum.photos/200?c=2" alt="image" height="200" /></span>
</div>
replace the a tags with div tags, like this
.hover_img div { position:relative; }
.hover_img div span { position:absolute; display:none; z-index:99; }
.hover_img div:hover span { display:block; }
<div class="hover_img">
<div>flippe flute<span><img src="//picsum.photos/200?c=1" alt="image" height="200" /></span></div>
<div>pottery flute<span><img src="//picsum.photos/200?c=2" alt="image" height="200" /></span></div>
</div>
You can use the same code as the question with few changes mentioned in my code. No need to use div for it. Just you have to style it the way that it looks like a list items.
.hover_img a { position:relative; font-family: Arial, sans-serif; padding: 40px 15px; border: 1px solid #ddd; border-bottom:none; display: block; color: #666; text-decoration: none; }
.hover_img a:first-child { border-radius: 10px 10px 0 0; }
.hover_img a:last-child { border-bottom: 1px solid #ddd; border-radius: 0 0 10px 10px; }
.hover_img a span { position:absolute; right: 10px; top: 10px; height:calc(100% - 20px); display:none; }
.hover_img a span img { max-width: 100%; height: auto; max-height: 100%; }
.hover_img a:hover { background-color: #eee; color: #333; }
.hover_img a:hover span { display:block; }
<div class="hover_img">
flippe flute<span><img src="https://picsum.photos/200?c=1" alt="image" /></span>
pottery flute<span><img src="https://picsum.photos/200?c=2" alt="image" /></span>
</div>
Hope it fulfils your requirement.
Thanks
Related
Here is the code:
body{
background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header{
background-color:#F0F8FF;
text-align:center;
padding:3px;
opacity:0.2;
height:60px;
}
h1{
font-family:'Lucida Console';
font-weight:bold;
color:blue;
}
div.header ul {
font-style:none;
font-size:50%;
list-style-type:none;
position:relative;
right:700px;
bottom:50px;
}
ul{
list-style-type:none;
line-height:220%;
}
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:visited{
color:white;
font-size:150%;
text-decoration:none;
margin:10px;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
div.gallary img{
position:relative;
left:160px;
top:150px;
margin:5px;
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
border: 1px solid #ccc;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div class = "header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class +"nav" >
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>apply</li>
</ul>
</div>
<div class = "gallary">
<img src = "http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg"></img>
<img src = "http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg"></img>
<img src = "http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg"></img>
<img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA"></img>
<img src = "http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300"></img>
</div>
</body>
</html>
My questions is when I run this code and hover over the links or the images,
They all seem to be connected through some invisible box. For example when I hover over the "Home" link. Every link and every img moves downward. How do I fix this? Thank you.
They are not connected at all, they are just responding to the elements growth because your links are making your font bigger on hover and your images are getting border on hover.
The best way to avoid this behavior is setting the border-sizing property:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* { Box-sizing: Border-box } FTW by Paul Irish
https://jsfiddle.net/j9rxzc2n/
please check this one it's misbehaving because its size was being increased while hovering. so I fixed its size, now it's working fine without up and down.
I only added this one line: ul li{height:30px; }
I'm guessing this is what you wanted? https://jsfiddle.net/link2twenty/8ktphwyo/
body {
background-image: url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header {
background-color: #F0F8FF;
text-align: center;
padding: 3px;
opacity: 0.2;
height: 60px;
}
h1 {
font-family: 'Lucida Console';
font-weight: bold;
color: blue;
}
div.header ul {
font-style: none;
font-size: 50%;
list-style-type: none;
position: relative;
right: 700px;
bottom: 50px;
}
ul {
list-style-type: none;
line-height: 220%;
}
a:link {
display: inline-block;
color: white;
font-size: 150%;
text-decoration: none;
transform-origin: left;
}
a:visited {
color: white;
font-size: 150%;
text-decoration: none;
margin: 10px;
}
a:hover {
transform: scale(1.2, 1.2);
color: #7CB9E8;
}
div.gallary img {
position: relative;
left: 160px;
top: 150px;
margin: 5px;
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0);
}
div.gallary img:hover {
z-index: 100;
transform: scale(1.1, 1.1);
border-color: #ccc;
}
<div class="header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>Apply</li>
</ul>
</div>
<div class="gallary">
<img src="http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg" />
<img src="http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg" />
<img src="http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg" />
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA" />
<img src="http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300" />
</div>
I've made it so none of the size changes effect the page flow. I've used css scaling rather than actually changing the size values and for borders I gave each image an invisible border that was coloured in rather than adding a border after.
You have:
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
This means when you move the mouse over a link (<a>), your font size becomes 220% instead of the regular 150% - that's what is causing the moving you describe - the size of any text will increase by approximately 50% (150/220).
EDIT / ADDED:
And the same with images (<img>tags) - you have:
div.gallary img{
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
}
which means: Your images in <div class="gallary">are 200x200px, but when you move the mouse over them, they become bigger: 220x220px, which also moves everything that comes after it...
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png">
<span class="btnText">Cancel</span>
</button>
I try to put a image and text inside a button and make it center.
How can I do it? I
This should work. Using align="middle" in the img tag.
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
Try this,
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
<span class="btnText">Cancel</span>
</button>
There are two ways.
Add a vertical-align: middle; property to the following class.
#submitCancel img {
border: 1px black solid;
vertical-align: middle;
}
or
add a align="center" attribute to the image tag.
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="center">
I have trouble with getting list items to display as I expect. Here are some images to help explain my issue.
I have to dynamically decide which items display. I control the display by either removing the li from the DOM using something like
parent.removeChild(child)
or
setting display:none;
if I remove the right most item on the top row I expect something like below
However I end up with something different
This trend continues if I remove any 2 items from a row
But the rows properly reflow if I remove all items from a row
the items displayed in the store are stored in an ul with each item inside a li item.
I'm using wordpress with woocommerce as my store software so there's a ton of code that may touch this issue.
This is an example of the HTML
<ul class="products">
<li class="post-188 product type-product status-publish has-post-thumbn…rst shipping-taxable purchasable product-type-simple instock">
<a href="https://arrc.vtc.vt.edu/mturk2/product/chewing-tobacco/">
<img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="Chewing Tobacco" src="https://arrc.vtc.vt.edu/mturk2/wp-content/uploads/2014/10/Chewing-Tobacco-150x150.jpeg"></img>
<h3>
Chewing Tobacco
</h3>
<span class="price">
<span class="amount">
$4.35
</span>
</span>
</a>
<a class="button add_to_cart_button product_type_simple" data-quantity="1" data-product_sku="dip" data-product_id="188" rel="nofollow" href="/mturk2/?add-to-cart=188">
Add to cart
</a>
</li>
<li class="post-91 product type-product status-publish has-post-thumbna…l shipping-taxable purchasable product-type-variable instock"></li>
<li>...
This is the CSS that deals with displaying the items
/* 2.4.1 Product Gallery */
.product-gallery {position: relative;margin:0 0 30px;}
.product-gallery ul.products { border-top:0; }
ul.products { margin-left:0; padding-left:2px; padding-right:2px; padding-top:2px; zoom:1; }
ul.products .added_to_cart { display: block; padding-top:.5em; }
ul.products:before, ul.products:after { content:""; display:table; }
ul.products:after { clear: both; }
ul.products li { width:30.75%; float: left; list-style: none; position: relative; margin-right:3.8%; text-align: center; margin-bottom:2.618em; }
ul.products li.first { clear: left; }
ul.products li.last { margin-right:0; }
ul.products a img { width:100%; height: auto; padding:0; border:0; background: #fff; border-radius:3px; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.25); -moz-box-shadow:0 0 3px rgba(0,0,0,0.25); box-shadow:0 0 3px rgba(0,0,0,0.25); -webkit-transition: all ease-in-out .2s; }
ul.products a:hover img {opacity:0.8; }
ul.products li a h3 { font-size:1em; display: block; padding-top:0; }
ul.products li a:hover h3 { color:#111; }
ul.products li a:hover { text-decoration: none !important; }
ul.products li .price {
position: absolute;
top:10px;
right:-6px;
background: #d23d46;
padding:2px 12px 2px 8px;
font-size:0.8751em;
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.25);
}
ul.products li .price:before {
content: "";
border:14px solid red;
border-right-width:2px;
border-color:#d23d46 #d23d46 #d23d46 transparent;
position: absolute;
top:0;
left:-14px;
}
ul.products li .price:after {
content: "";
border:6px solid red;
border-color: #892026 transparent transparent transparent;
border-left-width:0;
position: absolute;
right:0;
bottom:-12px;
}
ul.products li a.button { margin:0; }
.onsale {
background-color: #96c42e;
position: absolute;
top:10px;
left:-6px;
padding: 2px 8px;
font-size: 0.8751em;
text-align: center;
color:#fff;
z-index: 999;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.onsale:before {
content: "";
border:14px solid #96c42e;
border-color:transparent transparent transparent #96c42e;
position: absolute;
top:0;
right:-28px;
}
.onsale:after {
content: "";
border:6px solid #67861f;
border-color: #67861f transparent transparent transparent;
border-right-width:0;
position: absolute;
left:0;
bottom:-12px;
}
ul.products li del { color:#ccc; }
ul.products li ins { text-decoration:none; }
Mainly a css issue.
You'll need these overwrites:
ul.products li.last {
margin-right: 3% !important;
}
ul.products li {
margin-right: 3%;
width: 30%;
}
.last {
clear: none;
}
ul.products li.first {
clear: none;
}
The problem is your wordpress template appending first and last class to each row. Also, the width and right margins is greater than 100% which creates the wrap around.
This isn't mentioned above, but I see that li.first is given a clear:left. This will make it start a new row.
This is untested, but you can try the following: remove the clear:left; from
ul.products li.first { clear: left; }
and add instead
ul.products li:nth-of-type(3n+4) { clear: left; }
This should result in having clear:left; set to every third li starting by li 4 (= 3n+4 for n = 0).
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
Why not just convert them all to divs? That way when you remove a div everything should plop into place.
I have an expanding accordion. But when adding a inside the area, the div does not show, but only displays as blank? Any ideas? Thanks.
How can I get the div inside the to display its content?
The code: http://jsfiddle.net/6xnt3p8j/1/
JavaScript
$(document).ready(function(){
$(".accordion2 h3").eq(40).addClass("active");
$(".accordion2 p").eq(40).show();
$(".accordion2 h3").click(function(){
var video = $(".accordion2 h3.active").next().children();
var src = video.attr("src");
video.attr("src","");
video.attr("src",src);
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
CSS
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.box {
display:inline-block;
padding: 3px;
margin: 3px auto;
}
.accordion2 {
min-height:95px;
height:auto !important;
height:95px;
}
.accordion2 h3 {
padding-bottom: 1px;
margin: 0;
border-bottom: none;
cursor: pointer;
min-height:95px;
height:auto !important;
border:1px solid blue;
}
.accordion2 h3:hover {
background-color: #e3e2e2;
}
.accordion2 h3.active {
background-position: right 5px;
}
.accordion2 div {
/* background: red;
*/ margin: 0;
display: none;
}
HTML
<div class="accordion2">
<h3>
<div class="box"><img src='http://img.youtube.com/vi/tPgf_btTFlc'>
</div>
</h3>
<div>text text text text text text text text</div>
<h3>title</h3>
<div>text text text text text text text text</div>
<h3>title</h3>
<div>text text text text text text text text</div>
</div>
Thanks a million /M
remove display: none; in the css
Here is your css file
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.box {
display:inline-block;
padding: 3px;
margin: 3px auto;
}
.accordion2 {
min-height:95px;
height:auto !important;
height:95px;
}
.accordion2 h3 {
padding-bottom: 1px;
margin: 0;
border-bottom: none;
cursor: pointer;
min-height:95px;
height:auto !important;
border:1px solid blue;
}
.accordion2 h3:hover {
background-color: #e3e2e2;
}
.accordion2 h3.active {
background-position: right 5px;
}
.accordion2 div {
/* background: red;
*/ margin: 0;
}
Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>
Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.