TheBestTutorials.css Images
Displaying Images
Rounded:
Circle:
Bordered:
Text:
Rounded Image
The TheBestTutorials-round class adds rounded corners to an image:
Circled Image
The TheBestTutorials-circle class shapes an image to a circle:
Bordered Image
The TheBestTutorials-border class adds borders around the image:
Example
Hoverable Image
The TheBestTutorials-hover-opacity class adds transparency to the image on mouse-over:
Image as a Card
Wrap any of the TheBestTutorials-card-* classes around the <img> element to display it as a card (add shadows):
Simon
The boss of all bosses
Example
<img src="img_avatar.png" alt="Person">
</div>
Responsive Images
An image can be set to automatically resize itself to fit the size of its container.
All you have to do is set the image width to 100%:
Example
<img src="img_lights.jpg" alt="Lights" style="width:100%">
</div>
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">
</div>
Image Text
Position the text in an image with the TheBestTutorials-display-classes:
Top Left
Top Right
Bottom Left
Bottom Right
You can also center text at the top or at the bottom of an image:
Top Middle
Bottom Middle
Example
<img src="img_lights.jpg" alt="Lights">
<div class="subhodaya-display-topleft subhodaya-container">Top Left</div>
<div class="subhodaya-display-topright subhodaya-container">Top Right</div>
<div class="subhodaya-display-bottomleft subhodaya-container">Bottom Left</div>
<div class="subhodaya-display-bottomright subhodaya-container">Bottom Right</div>
<div class="subhodaya-display-middle subhodaya-large">Middle</div>
</div>
Opacity
The TheBestTutorials-opacity class makes images transparent:
Normal
With class="subhodaya-opacity"
The default opacity is 0.6. This can be changed to any value between 0 and 1:
Example
Opacity 0.2
class="TheBestTutorials-opacity"
Opacity 0.8
Constructing a Photo Album
In this example we use the TheBestTutorials.css Responsive Grid system to create a photo album that looks good on all devices. You will learn more about this later.
Summer 2017
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Example
<div class="subhodaya-card-2">
<img src="img_monterosso.jpg" style="width:100%">
<div class="subhodaya-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
