Jump to content

Expand images on hover


bmcs

Recommended Posts

Hi Folks,I have been searching around for days looking for a way to expand the size of an image on hover. I finally found http://w3schools.invisionzone.com/index.php?showtopic=41502 which is the closest thing to what I am trying to achieve. This method defines the default size of the image inside the image's

container. I need to have a number of different sized images on the same page with text wrapping around them. For example:1 landscape scaled 250px x 167px floated right.1 portrait scaled 200px x 290px floated left.1 scaled 300px x 300px floated left.and so on...Ignoring the float, is there a way this can be done without creating an individual class for each image. It can probably be simulated in jquery, but I would prefer to use css if possible.Any advice or guidance would much appreciated.RegardsDave
Link to comment
Share on other sites

If you wrap your images in an empty anchor tag this should be easya .myImg {max-width:200px; height:200px}a:hover .myImg {max-width:inherit;height:inherit;}In theory you might be able to use....myImg {max-width:200px; height:200px}.myImg:hover {max-width:inherit;height:inherit;}But browser compat should be reviewed for this

Link to comment
Share on other sites

You have to define a method to identify the images you wish to apply the effect to, how are you applying float? inline? so you happy to apply float to every image, BUT! not a class name, which could identify this image using the expand feature and apply float at same time.

Link to comment
Share on other sites

Identifying the image is the main issue I am trying to resolve. The horizontal positioning (floating) of the images doesn't concern me too much, I can work that out later.
Think of a newspaper style of layout, with text wrapping around the images. The site I am working on has a section with ~50-60 pages and 5-6 images per page, each with this expand on hover style. The http://w3schools.invisionzone.com/index.php?showtopic=41502 solution identifies and locks the image name inside the CSS class:
<div id="container"><div class="cover"><div class="inside"><img src="image_name.jpg" width="100%" alt="image"></div></div></div>

This works fine for just one image or a handful images, but I do not want to have 300+ classes (ie. one for each image). It would make more sense to dump CSS styling and go back to the old table layout.

 

Entry #7 CSS Image Enlarger http://www.istu.co.uk/index.html would be my ideal, but I am not smart enough to work out how to wrap text around the images :( .
Thanks & Regards
Dave
Edited by bmcs
Link to comment
Share on other sites

You don't have to mark every image with a class, just the container/s it is in example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>Untitled Document</title>        <style>            html, body{                height:100%;                padding:0;                margin:0;            }            #wrapper {width: 960px; margin: 0 auto; background-color: #ccc;}            #container {margin: 0 8px; }            .image_enlarge_container {overflow:hidden;}            .image_enlarge_container img {max-width: 200px; margin: 8px; max-height:200px; }            .image_enlarge_container img:hover {max-width: 480px; width:100%; max-height: 480px;  }            .image_enlarge_container img:nth-child(odd) {float:left; }            .image_enlarge_container img:nth-child(even) {float:right;}            .image_enlarge_container p {clear: both;            }        </style>    </head>    <body>        <div id="wrapper">            <div id="container" class="image_enlarge_container">                <p><img src="image1.jpg" alt="bama" /><img src="image1.jpg" alt="bama" />In order to build a shared view of what can be improved, the components                    and priorities for the change program while those at the coal face don't                    have sufficient view of the overall goals. Big is no longer impregnable whether                    the organization's core competences are fully in line, given market realities                    presentation of the process flow should culminate in idea generation. Defensive                    reasoning, the doom loop and doom zoom empowerment of all personnel, not                    just key operatives, as knowledge is fragmented into specialities. Taking                    full cognizance of organizational learning parameters and principles, to                    ensure that non-operating cash outflows are assessed. Exploitation of core                    competencies as an essential enabler, an important ingredient of business                    process reengineering to focus on improvement, not cost.</p>                <p>Measure the process, not the people. Building flexibility through spreading                    knowledge and self-organization, the components and priorities for the change                    program motivating participants and capturing their expectations. To ensure                    that non-operating cash outflows are assessed.</p>                <p><img src="image3.jpg" alt="bama" /><img src="image4.jpg" alt="bama" />In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>                <p>In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>                <p><img src="image5.jpg" alt="bama" /><img src="image6.jpg" alt="bama" />In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Thanks dsonesuk, but my existing code and your example are very similar and neither succeed in creating the effect I am looking for. What I am trying to achieve is to have the images expand over (on top of) the adjacent text instead of displacing it.

 

Regards

Dave

Link to comment
Share on other sites

Can't be done in css alone

You would have to use position: absolute; for images, problem using this is, it is taken out of the flow from the other elements, so the other elements would occupy the space it would have occupied, to prevent this you would have to wrap the image in a container element that matches the size of the image, this container element also would control where the image would appear using position: relative; without this they would more than likely appear at top left of web browser window.

 

You could use Jquery to wrap a specified container around all these images onloading of page, to achieve this.

Link to comment
Share on other sites

Use the CSS3 Transform property and use the scale function on hover, just as punterf16 said. All other ways have too much coding.

 

First, you need a css selector to target the image. You can create a class or you can use the img tag selector. But I would suggest making the selector as specific as possible so that only the images you want to scale up on hover do so. So, begin your selector with whatever div you are working in. Suppose the div has an id of "main" and the image you want to scale on hover is a child of the main div....

 

#main img:hover {

transform: scale (1.1);

}

 

Now you may have to add vendor prefixes to the property declaration, such as -moz, -webkit.

Go to caniuse.com to see what browser support is like for any CSS3 property.

 

With Vendor Prefixes:

 

#main img:hover {

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);

}

 

Look up Vendor prefixes so you understand which prefix targets which browser.

Edited by kelly2marie
Link to comment
Share on other sites

You may need to use transform origin to position them correct when enlargement takes place

<!DOCTYPE HTML><html>    <head>        <title>Untitled Document</title>        <style type="text/css">            html, body{                height:100%;                padding:0;                margin:0;            }            #wrapper {width: 960px; margin: 0 auto; background-color: #ccc;}            #container {margin: 0 8px; padding-bottom: 480px;}            #container p {text-align: justify;}            .image_enlarge_container {overflow:hidden;}            .image_enlarge_container img:nth-of-type(odd) {float:left;}            .image_enlarge_container img:nth-of-type(even) {float:right;}            .image_enlarge_container img {max-width: 200px; margin: 0.5em;  }            .image_enlarge_container img:hover {                transform:scale(2.5,2.5);            }            .image_enlarge_container img:nth-of-type(odd):hover {transform-origin:0 0;}            .image_enlarge_container img:nth-of-type(even):hover { transform-origin:100% 0;}            .image_enlarge_container p {clear: both;            }        </style>    </head>    <body>        <div id="wrapper">            <div id="container" class="image_enlarge_container">                <p><img src="../AlienVsPredator.jpg" alt="bama" /><img src="../images/mod_jq4.jpg" alt="bama" />In order to build a shared view of what can be improved, the components                    and priorities for the change program while those at the coal face don't                    have sufficient view of the overall goals. Big is no longer impregnable whether                    the organization's core competences are fully in line, given market realities                    presentation of the process flow should culminate in idea generation. Defensive                    reasoning, the doom loop and doom zoom empowerment of all personnel, not                    just key operatives, as knowledge is fragmented into specialities. Taking                    full cognizance of organizational learning parameters and principles, to                    ensure that non-operating cash outflows are assessed. Exploitation of core                    competencies as an essential enabler, an important ingredient of business                    process reengineering to focus on improvement, not cost.</p>                <p>Measure the process, not the people. Building flexibility through spreading                    knowledge and self-organization, the components and priorities for the change                    program motivating participants and capturing their expectations. To ensure                    that non-operating cash outflows are assessed.</p>                <p><img src="../images/mod_jq4.jpg" alt="bama" /><img src="../AlienVsPredator.jpg" alt="bama" />In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>                <p>In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>                <p><img src="../images/mod_jq4.jpg" alt="bama" /><img src="../AlienVsPredator.jpg" alt="bama" />In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...