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 put a space between the hover effect in this situation css html php?

    How can I use PHP code in a CSS file

    How to render css file from url in to the webview in android

    How to customize and change ready-made CSS libraries such as Twitter Bootstrap, and what other alternatives exist? [closed]

    How do I make everything on this page centered and fully responsive for all browsers?

    How i can optimize Performance in asp.NET MVC based web application

    How do I center a character in a box using CSS?

    CSS: How to vertically align elements inside div with display: table-cell

    How to avoid background image tile when browser window resizes

    How to make all my div's same height based on breathing content

    Email-box shows at “random” place

    How to wait for a video background in HTML until it finish and then view the contents of body section?

    How to add hover class to jQuery click(function() accordian divs?

    How to remove the css class

    How to apply CSS selector on Select Option Child

    How to reduce responsively the height of images in the flexbox layout to fit window height?

    How to change text color for link in tr element with CSS

    how to make a span hold its position from an encroaching div

    How to make a table-cell have the same width as its height?

    How to change text (not font size) according to screen size in CSS?

    CSS How to apply child:hover but not parent:hover

    How to rotate a div

    How to remove hover state

    How to style SVG with external CSS?

    How to make gridview and cells bigger?

    How to apply gradient color in css?

    How to get MathJax's HTML output just like Stackedit.io?

    How do you align left / right a div without using float?

    CSS: How to set height of body element to fill rest of total height excluding variable length header and footer

    Jquery CSS How To Use Margin: 0 auto