https://www.w3schools.com/howto/howto_css_image_overlay_zoom.

asp

Bootstrap Tutorial
BS HOMEBS Get StartedBS Grid BasicBS TypographyBS Tables

BS Images: Bootstrap Image Shapes

Rounded Corners:

Circle:

Thumbnail:
Rounded Corners
The .img-rounded class adds rounded corners to an image (IE8 does not
support rounded corners):

Example
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">

Try it Yourself »

Circle
The .img-circle class shapes the image to a circle (IE8 does not support
rounded corners):

Example
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">

Try it Yourself »

Thumbnail
The .img-thumbnail class shapes the image to a thumbnail:
Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Try it Yourself »

Responsive Images
Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class to
the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width:
100%; and height: auto; to the image:

Example
<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Try it Yourself »

Image Gallery
You can also use Bootstrap's grid system in conjunction with
the .thumbnail class to create an image gallery.
Lorem ipsum donec id elit non mi porta gravida at eget metus.

Lorem ipsum donec id elit non mi porta gravida at eget metus.

Lorem ipsum donec id elit non mi porta gravida at eget metus.

Note: You will learn more about the Grid System later in this tutorial (how to
create a layout with different amount of columns).

Example
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
 </div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>

Try it Yourself »

Responsive Embeds
Also let videos or slideshows scale properly on any device.
Classes can be applied directly to <iframe>, <embed>, <video>, and <object>
elements.
The following example creates a responsive video by adding an .embed-
responsive-item class to an <iframe> tag (the video will then scale nicely to
the parent element). The containing <div> defines the aspect ratio of the video:

Example
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Try it Yourself »

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its
width and its height. Two common video aspect ratios are 4:3 (the universal
video format of the 20th century), and 16:9 (universal for HD television and
European digital television).
You can choose between two aspect ratio classes:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">
 <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Try it Yourself »

Test Yourself With Exercises

Exercise:
Use a Bootstrap class to shape the image as a circle.

<img src="img_chania.jpg" alt="Chania" class=" ">

Submit Answer »
Start the Exercise

Complete Bootstrap Image Reference

For a complete reference of all image classes, go to our complete Bootstrap
Image Reference.

HOW TO
Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

How To Create a Flip Card

Step 1) Add HTML:

Example
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;
">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>

Step 2) Add CSS:

Example
/* The flip card container - set the width and height to whatever you want.
We have added the border property to demonstrate that the flip itself goes
out of the box on hover (remove perspective if you don't want the 3D effect
*/
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container
*/
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */

.flip-card-front {
background-color: #bbb;
color: black;
}

/* Style the back side */

.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

BS JumbotronBS WellsBS AlertsBS ButtonsBS Button GroupsBS GlyphiconsBS

Badges/LabelsBS Progress BarsBS PaginationBS PagerBS List GroupsBS PanelsBS
DropdownsBS CollapseBS Tabs/PillsBS NavbarBS FormsBS InputsBS Inputs 2BS Input
SizingBS Media ObjectsBS CarouselBS ModalBS TooltipBS PopoverBS ScrollspyBS AffixBS
Filters

Bootstrap Grids
BS Grid SystemBS Stacked/HorizontalBS Grid SmallBS Grid MediumBS Grid LargeBS Grid
Examples

Bootstrap Themes
BS TemplatesBS Theme "Simply Me"BS Theme "Company"BS Theme "Band"

Bootstrap Examples
BS ExamplesBS QuizBS ExercisesBS Certificate

Bootstrap CSS Ref

CSS All ClassesCSS TypographyCSS ButtonsCSS FormsCSS HelpersCSS ImagesCSS TablesCSS
DropdownsCSS NavsGlyphicons

Bootstrap JS Ref
JS AffixJS AlertJS ButtonJS CarouselJS CollapseJS DropdownJS ModalJS PopoverJS
ScrollspyJS TabJS Tooltip