How to enlarge and tint photo with pure CSS and jQuery [closed]


Tags: jquery,css

Problem :

I have a feeling this isn't jQuery based, but I'm simply looking for opinions. Notice on mouseover, how the golf players fade out slightly, enlarges the photo size, and gets blurry, and text comes up. I really want to do that.

http://www.kevinsprecher.com/

It is possible to capture this mouse-over effect with straight jQuery/CSS?



Solution :

You can achieve the desired effect with pure CSS with on :hover. Use jQuery if you need support in older browsers (e.g. IE8).

Check out these resources:

Have a closer look at the source of the website you specified as demo:

<!-- Source of http://www.kevinsprecher.com/ -->
<div class="c-mb-con" style="position: absolute; top: 0px; left: -610px; display: none; z-index: 4; opacity: 1; width: 610px; height: 325px;">
    <a href="online-golf-lessons.html">
        <div class="ban-ro">
            <h2>Improve You Game With Our Online Golf Lessons.</h2>
            <div class="blog-arrow"><span>+</span>Learn More</div>
        </div>

        <img src="http://imavex.vo.llnwd.net/o18/clients/kevinsprecher/images/Main_Banner/online-golf-lessons.jpg" alt="Improve You Game With Our Online Golf Lessons." title="Improve You Game With Our Online Golf Lessons." width="610" height="325">
    </a>
</div>

…and the related CSS Source:

#c-mb a img {
    width: 110%;
    height: 110%;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

#c-mb a:hover img, #c-mb a:active img {
    display: block;
    width: 610px;
    height: 325px;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

    CSS Howto..

    How to align images side by side without spacing when grouped within another element

    How to change color in first td in my table using class

    How to auto adjust wrapper height when padding is applied to inner elements

    How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

    How to set session variable in jquery/css?

    How to put text on placeholder image

    How do I make the Android WebView not ignore the 'height' css property?

    How to hover over a div to change just a part of its background?

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How to reverse this CSS spin animation

    How to set textbox width fit in table cell CSS

    How to control the size of a table cell in css

    How could i make CSS apply to all in a div?

    How to refer to children elements in CSS

    How to make an image not overlap navigation bar in CSS/HTML [closed]

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    How to Validate HTML, CSS and JS in Eclipse IDE

    How to select a div with specific css property

    How to Implement this UI with CSS [closed]

    How do you determine whether a CSS property requires browser specific prefixes?

    How to insert 5 pictures next to eachother in a row

    How to wait a while before adding elements in css? javascript?

    How to add overflow : hidden and max widths on images

    How can I target a element inside h2

    How to avoid background image tile when browser window resizes

    How to get arrows appear on carousel only on hover

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How to solve CSS dropdown border error?

    How to create triple div border in CSS

    how to search with GET method in MVC