Image Styles

img-float (Skeleton Styling)

pull image right; 60

This is styling looks like float right and resizes the image to 60% of the original size. changing the '60' of 'img-insert-60' (hence 60%) will change the percentage of the images accordingly.

<figure class="u-pull-right img-inset-60"><img alt="alt-txt"
class="u-full-width" src="http://www.geneva.edu/docs/CP/1122/group.jpg">
</figure>

pull image left; 40

This is styling looks like float left and resizes the image to 40% of the original size. changing the '40' of 'img-insert-40' (hence 40%) will change the percentage of the images accordingly.

<figure class="u-pull-left img-inset-40"><img alt="alt-txt"
class="u-full-width" src="http://www.geneva.edu/docs/CP/1122/group.jpg">
</figure>

class="img-swap"

<a href="/give/give_now">
<img alt="GC Facebook" class="img-swap" src="http://www.geneva.edu/_files/images/ico-fb_off.png">
</a></div>

Put this in script:

jQuery(function(){
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
});

For more image swaps, see buttons in the boiler plate at the bottom of the screen, such as the buttons for YouTube, Twitter, Instagram, etc.

faculty_no_photo.jpg

Faculty Name

This asset can be used as a placehodler for missing photos, where needed.

These assets can be used to turn squares pictures into circles

Image Styles

Image Styles

img-float (Skeleton Styling)

pull image right; 60

pull image left; 40

class="img-swap"

faculty_no_photo.jpg

Faculty Name