W3.CSS Images







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



W3.CSS Images



❮ Previous
Next ❯




Rounded:


Northern Lights


Circle:


Forest


Bordered:


Mountains


Text:



Nature
Nature






Rounded Image


Norway

The w3-round class adds rounded corners to an image:



Example



<img src="img_snowtops.jpg" class="w3-round" alt="Norway">


Try It Yourself »



Circled Image


Norway

The w3-circle class shapes an image to a circle:



Example



<img src="snowtops.jpg" class="w3-circle" alt="Alps">


Try It Yourself »







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





Bordered Image


Norway

The w3-border class adds borders around the image:



Example



<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">


Try It Yourself »


Image as a Card


Wrap any of the w3-card-* classes around the <img> element to display it as a card
(add shadows):






Lights





Person

Simon


The boss of all bosses








Example



<div class="w3-card-4">
  <img src="img_avatar.png"
alt="Person">
</div>


Try It Yourself »



Image Text


Position the text in an image with the w3-display-classes:



Lights

Top Left


Top Right


Bottom Left


Bottom Right


Left


Right


Middle

Top Middle


Bottom Middle





Example



<div class="w3-display-container">
  <img src="img_lights.jpg"
alt="Lights">
  <div class="w3-display-topleft w3-container">Top
Left</div>
  <div class="w3-display-topright w3-container">Top
Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom
Left</div>
  <div class="w3-display-bottomright w3-container">Bottom
Right</div>
  <div class="w3-display-left w3-container">Left</div>
  <div class="w3-display-right w3-container">Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
  <div class="w3-display-topmiddle w3-container">Top Middle</div>
  <div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>


Try It Yourself »


Responsive Images


An image can be set to automatically resize itself to fit the size of its container.


If you want the image to scale down if it has to, but never scale up to be
larger than its original size, use the w3-image class.




Example



<img src="img_lights.jpg"
alt="Lights" class="w3-image">

Try It Yourself »


If you want the image to scale both up and down on responsiveness, set the
CSS width property to 100%:




Example



<img src="img_lights.jpg"
alt="Lights" style="width:100%">

Try It Yourself »


If you want to restrict a responsive image to a maximum size, use the max-width property:




Example



<img src="img_lights.jpg"
alt="Lights" style="width:100%;max-width:400px">

Try It Yourself »


Opacity


The w3-opacity classes make images transparent:





Normal





w3-opacity-min






w3-opacity





w3-opacity-max









Example



<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">

<img src="img_forest.jpg" alt="Forest" class="w3-opacity">

<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">

Try It Yourself »


Grayscale


The w3-grayscale classes add a grayscale effect to an image:






Normal







w3-grayscale-min







w3-grayscale







w3-grayscale-max










Example



<img src="image.jpg" alt="Table" class="w3-grayscale-min">

<img src="image.jpg" alt="Table" class="w3-grayscale">

<img src="image.jpg" alt="Table" class="w3-grayscale-max">

Try It Yourself »



Note: The w3-grayscale classes are not supported in IE 11
and earlier versions.




Sepia


The w3-sepia classes add a sepia effect to an image:






Normal







w3-sepia-min







w3-sepia







w3-sepia-max










Example



<img src="image.jpg" alt="Table" class="w3-sepia-min">

<img src="image.jpg" alt="Table" class="w3-sepia">

<img src="image.jpg" alt="Table" class="w3-sepia-max">

Try It Yourself »



Note: The w3-sepia classes are not supported in IE 11 and
earlier versions.




Hover Effects


You can also add special effects on hover/mouse-over.





Norway

w3-hover-opacity






Norway

w3-hover-grayscale







Norway

w3-hover-sepia








Example



<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">


Try It Yourself »


Opacity Off




Add transparency on hover:


Norway


Remove transparency on hover:


Norway



The w3-hover-opacity class adds transparency to the image on mouse-over, and the
w3-hover-opacity-off class removes transparency on mouse-over.




Example



<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">

<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">


Try It Yourself »


Constructing a Photo Album


In this example we use the W3.CSS Responsive Grid system to create a photo album that looks good on all devices.
You will learn more about this later.




Summer 2015








5 Terre









Monterosso









Vernazza











Manarola









Corniglia









Riomaggiore








Example



<div class="w3-third">
  <div class="w3-card">
   
<img src="img_monterosso.jpg" style="width:100%">
    <div
class="w3-container">
      <h4>Monterosso</h4>
   
</div>
  </div>
</div>


Try It Yourself »




❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more