CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
Streicham16
Streicham16

Reputation: 1

Creating hover state on an image with an icon

I am newer to HTML5/Bootstrap and I am trying to add a basic hover state to my responsive images and also make them act as buttons. Here's what I currently have developed. 

          <div align="center" class="col-sm-2">
            <a href="#">
                <picture>
                    <!--[if IE 9]><video style="display: none;"><![endif]-->
                    <source srcset="../../../img/img1.png" class="img-responsive" media="(min-width: 800px)">
                    <!--[if IE 9]></video><![endif]-->
                    <img srcset="../../../img/img1-sm.png, ../../../img/img1-sm.png" class="img-responsive" alt="Image One">
                </picture>
            </a>
          </div>

Upvotes: 0

Views: 150

Answers (2)

Mo Alsaedi
Mo Alsaedi

Reputation: 707

you can always use css, depending on what effect you would like to produce with hover. The code below goes in your css stylesheet file, or in your document wrapped in "style" tags

picture img:hover{
/*Things to happen on hover*/
}

or you can use jQuery. The code below goes into "script" tags, and can be run on page load.

$(window).load(function(){
    $('picture').find('img').hover(function(){
        //Things to happen on hover
    });
});

To make it into a button, wrap it in a link or use jQuery to create a click event

Upvotes: 2

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

Use CSS to hover and use jQuery to use it as buttons.

$(document).ready(function(){
	$("#myImage").click(function(){
		alert("Your picture acts like a button!");
	});
});
#myImage:hover
{
	-webkit-filter:grayscale(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://goo.gl/DiODcW"></script>
<img src="http://goo.gl/DiODcW" class="img-responsive" id="myImage">

In the snippet above, the hoverin CSS converts the image into a grayscale image(you can add your own code) and the click on image opens an alert box(you can add your own code).

or if you want to use your image as links, do this :

<a href="#your link"><img src="http://goo.gl/DiODcW" class="img-responsive" id="myImage"></a>

Upvotes: -1

Related Questions