I've got some social media icons that I'd like to change color when they're hovered over. I figured the easiest way to do this is by replacing the image with a new one (they're small png files). What do you suggest? A dynamic function would be ideal.. there are four icons, each of which has a filename of demo.png, demo_hover.png. I'm using the jQuery library.
Thank you!
HTML
<a class="a" id="interscope_icon" href="http://www.interscope.com/" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a>
<a class="a" href="http://www.twitter.com/FernandoGaribay" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a>
</p>
<p>
<a class="a" href="http://www.facebook.com/f2inc" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a>
<a class="a" href="http://www.myspace.com/f2inc" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a>
</p>
jQuery
$('#interscope_icon').hover(function(){
$('#interscope').attr('src', 'Images/icons/interscope.png');
});
You're probably better off using the 'CSS sprite' method rather than loading a new image...
http://css-tricks.com/css-sprites/
The easy way is to do it the CSS way:
#interscope_icon { background-image: url(...) }
#interscope_icon:hover { background-image: url(...) }
I just had this dilemma as well so came up with my own method. Super easy, works great and no need for sprites, just an transparent PNG:
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
http://jsfiddle.net/mattmagi/MpxBd/
Let me know what you think.
I would give the social icons as the background-image on the anchors (with display: inline-block;) instead of as <img /> elements inside the anchors.
Then simply define an a:hover state that changes the CSS to a different background. Perhaps even sprite them.
Something like this:
#some_id { background-image: url(...); }
#some_id:hover { background-image: url(...); }
Related
On the website I have I can only input code into the body and the footer.
The website is bothellhomes.com. The homepage shows three round images. On a mobile device, I want to resize the images so they show horizontally. Right now, since the images are so large, they go vertically.
Body code:
<section class="three-widgets">
<ul class="small-block-grid-1 medium-block-grid-3 text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>
Footer code:
<script>// <![CDATA[
document.write("<style>.three-widgets {margin-top: -60px;}.three-widgets img {background: #fff;border: 1px solid #ddd;border-radius: 100%;padding: 5px;}.three-widgets p {color: #000}.three-widgets li img { opacity: .9;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.three-widgets li:hover img {border: 1px solid #444444;opacity: 1; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}#media (max-width:767px) {.three-widgets { margin-top: 0}}h1{ line-height:38px!important}</style>");
// ]]></script>
You should think mobile first. Apply styles to the images for the mobile version, and then override them using media queries for the desktop viewing.
You will likely want to add an ID or class to target strictly the desired images. In this case I added an id called round-images. Remove the classes "small-block-grid-1" and "medium-block-grid-3".
Body Code:
<section class="three-widgets" id="round-images">
<ul class="text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>
Next, style the images as you want for mobile using CSS. Since you don't have access to the header, you can get around that limitation through inline CSS or as I show below with embedded CSS. Lastly, add a media query to reset the styles how you had them before. Here is the idea:
<style>
/* the following controls image size */
#round-images img{
max-width:100px;
max-height:100px;
};
#media (min-width: 768px) {
#round-images img{
max-width:300px;
max-height:300px;
};
}
/* the following will remove the vertical stacking */
#round-images ul li{
float:left;
width:33%;
};
</style>
I got this working without your classes "small-block-grid-1 medium-block-grid-3".
Not sure why you cannot use css. But it seems like you cannot so you can use inline styles to just float them next to each other. Keep in mind that it will become really small images the smaller the screen size is.
<li style="float:left;width="30%">
put this style on all the < li > elements. and the middle one should perhaps have 5% margin on each side to prevent the image edges from touching each other.
<li style="float:left;width="30%;margin:0 5%;">
You also need to remove the height of the image and only set the width of the image to 100% so it will stretch to the edge of it's container which is the li.
You can of course do the same with css by giving the li's a class and floating them left.
I am relative new to web development so while developing a project site responsive design I ran into a problem that when ever hamburger menu is pressed even though lines for expending exists in external css file but it is not detected but new inine styles are created by javascript and then it works as expected.
HTML:
<nav class="mobileNav" id="mobileMenu">
<a class="mol-6" onclick="show();" href="index.html">
<figure>
<img class="icon" src="images/nav/home.png" alt="">
<figcaption>Home</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="astronomy.html">
<figure>
<img class="icon" src="images/nav/astro.png" alt="">
<figcaption>Astronomy</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="telescope.html">
<figure>
<img class="icon" src="images/nav/tele.png" alt="">
<figcaption>Telescopes</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="about.html">
<figure>
<img class="icon" src="images/nav/about.png" alt="">
<figcaption>About</figcaption>
</figure>
</a>
</nav>
CSS:
#mobileMenu {
font-family: light, sans-serif;
max-height: 0px;
z-index: 99;
transform: translateY(-100%);
overflow: hidden;
padding: 0px;
transition: transform 0.5s;
}
Javascript:
function show() {
if (document.getElementById("mobileMenu").style.maxHeight == "0px") {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "100%";
document.getElementById("mobileMenu").style.position = "fixed";
document.getElementById("mobileMenu").style.padding = "1%";
}, 1)
document.getElementById("mobileMenu").style.transform = "translateY(0px)";
} else {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "0px";
document.getElementById("mobileMenu").style.padding = "0px";
document.getElementById("mobileMenu").style.position = "relative";
}, 500)
document.getElementById("mobileMenu").style.transform = "translateY(-100%)";
}}
Working Example:
Astromuneeb (Require Portrait Orientation)
Any help will be appreciated.
There are better approaches of what you are trying to accomplish. For instance, you could use css classes for styling and use javascript only for switching classes.
I agree with Eugene, but .mobileNav class seems to be overriding your portrait media query.
I added important to your .mobileNav portrait media query but even that won't override it, guess its something to do with hierarchy. It's weird you get display:none; as an inline style on your nav when opening and closing currently, that will not help.
Definitely just set a .open class as Eugene suggested. And use css transforms to do the animation. And just simply add/remove class on the nav.
And when using media queries in css for mobile etc prob best to use screen size etc, and start mobile first...
.mobileNav { display: block; }
#media (min-width: 992px) {
.mobileNav { display: none; }
}
once we hover on image, i want to display another image.
<div>
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>
i tried as below :
I added class="a1", but it did't worked for me.
<a class="a1" href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
css
.a1:hover {
background-image: url('images/G+1.png');
}
Here are two solutions for your query. (Change image on mouse hover)
HTML + JavaScript Demo
<div class="image_hover">
<a href="#" rel="nofollow">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
</a>
</div>
HTML + CSS Demo
.image_hover {
position: relative;
cursor: pointer;
}
.image_hover img {
position: absolute;
transition: opacity .5s ease;
}
.image_hover img:hover {
opacity: 0;
}
<div class="image_hover">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
<img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>
First, give your link tag some style, to set it's background.
a.a1 {
display: block;
width: 100px;
height: 50px; (width and height are whatever you need them to be)
background: url('images/G+.png') no-repeat center center;
}
Now this is a very light example here, but what it is doing is setting your link as a block-level element, giving the right dimensions of the image background, and then setting the whole elements background as the image.
Then, for the rollover effect, you use:
a.a1:hover {
background: url('images/G+1.png') no-repeat center center;
}
Now I like to put my no-repeat and positioning attributes in the background attribute, you can separate these into background-size etc if you really want.
I am aware in your implementation you have an img in there setting the picture, but for what you want to achieve I'd suggest using a css alternative.
SO link on the subject (as per comment):
CSS: image link, change on hover
Additional the answer in #AaronLavers's comment (use background-image and replace it on :hover), you can use :before - pseudo class and content property.
The plus
It's generic solution. You have not to set the width and the height of the link - like in background-image way.
The minus
You can't change the image's size like using background-size etc. but if your image is the exact size you want, the problem solved.
a:before {
content:url(http://i.stack.imgur.com/upUcm.jpg);
}
a:hover:before {
content:url(http://i.stack.imgur.com/sn2Ag.jpg);
}
The reason this is not working is because the img tag and background-image are 2 different things. If you want this to work, you could try putting the background image on the a to begin with and then changing it on hover. It needs important because of specificity rules. The other option would involve putting php in your css file, but that is probably not worth the effort to set up.
CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}
HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>
I have written some code in html and css to scroll horizontally across image thumbnails and have them pop up on mouse hover. The problem is that when I can scroll horizontally, then the popped up (enlarged) image on mouse hover is only visible within the div that it is contained in. I would like for it to be visible on top of everything else on the page. But since I created the scroll bar by making the property of the div overflow-x:scroll,you would have to scroll to see the enlarged image if it is larger than the div. When I don't see the overflow-x property to scroll, I can view the enlarged image on top of everything else like I want to but all the other thumbnails are also visible. Here is a code snippet to show what I've done.
HTML
<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span> <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span> <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->
CSS
#example1_car1,#example1_car2,.scroll{
position:relative;
}
#example1_car1, #example1_car2
{
width:2400px;
height:200px;
z-index:0
}
.scroll
{
width:800px;
height:210px;
overflow-x:scroll;
z-index:0;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
zindex:-1;
}
.thumb span {
position: relative;/*absolute;*/
display:none;
}
.thumb:hover, .thumb:hover span {
display:inline;
top:0; left: 0px;
/*z-index:1;*/
z-index:10;
}
Any help would be much appreciated.
To make the enlarged image appear on top of/outside of the scrollable region, it will have to actually be outside of it.
To make the enlarged image appear outside, when hovering over a thumbnail that is inside of the scrollable region, you will need to use JavaScript on top of your HTML and CSS.
Here's an example on jsfiddle, in which I haven't changed your HTML structure. Instead I used jQuery to clone the enlarged image outside of the scrollable region and append it to the #example1 div, when you hover over a thumbnail.
JavaScript portion:
$('.thumb').hover(
function(){
var thumb = $(this).children('img');
var large = $(this).find('span>img').clone();
$('#example1').append(large);
large.addClass('enlargedImg');
large.css({
'top': thumb.offset().top,
'left': thumb.offset().left
});
},
function(){
$('.enlargedImg').remove();
}
);
I used the thumb image's offset() values to position the enlarged image directly on top of it. You'll probably want to move it a bit but hopefully this is enough to get you started.
I am programming an image viewer box which overlays a thumbnail gallery page. The image viewer is set to become visible when the user clicks on a thumbnail.
Currently, when a thumb is clicked, the viewer pops into visibility and then immediately becomes invisible again. I would like to know how to invoke the viewer to full visibility and then keep it there.
I am using an external .js file.
The onclick event:
<div class="thumb_box">
<a href="" alt="gallery thumb" onclick="invokeViewer()">
<img class="thumbnail" src="../thumbs/jacob/jacob1.png" />
</a>
</div>
The JavaScript function:
function invokeViewer(){
var viewerBack = document.getElementById('imagebox_foreground');
var viewerFore = document.getElementById('imagebox_background');
var currentImage = document.getElementById('current_image');
viewerBack.style.visibility='visible';
viewerFore.style.visibility='visible';
currentImage.style.visibility='visible';
return false;
}
The Viewer Div's HTML:
<div id="imagebox_foreground" style="visibility:hidden">
<img id="current_image" style="visibility:hidden" src="imageurl.jpg" />
</div>
<div id="imagebox_background" style="visibility:hidden"></div>
The Viewer Div's CSS
#imagebox_foreground{
position:absolute;
left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:transparent;
z-index:992;
}
#imagebox_background{
position:absolute; left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:black;
border-right:solid 4px rgb(40,40,40); border-left:solid 4px rgb(40,40,40);
opacity:.85; filter:alpha(opacity=85);
z-index:991;
}
#current_image{
display:block;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}
I suspect your href is being triggered and your page is being reloaded. Add return false to your event handler to prevent the link from being triggered. invokeViewer() is already returning false, so you can just say return invokeViewer():
<a href="" alt="gallery thumb" onclick="return invokeViewer()">
Or:
<a href="" alt="gallery thumb" onclick="invokeViewer(); return false;">