Semantic-UI Card Image Content

Last Updated : 07 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing and responsive. The semantic UI Card element displays site content in a manner similar to a playing card using the Semantic UI classes. Semantic UI cards have multiple sections such as content, extra-content, approval, and description. In this article, we will learn about the Approval block of the Semantic UI card. Semantic-UI Card Image Content is used to create a card containing images. We can add one or two images in the card element and we can change the image on the hover or change the style of the card on the hover element.

Semantic-UI Card Image Content Class:

image: This class is used to add the image on the card element.

Syntax:

<div class="ui card">
      <div class="ui image">
        <img src="gfg.jpg">
        ...
      </div>
      <div class="content">
          ...
      </div>
      ...
</div>

Example 1: In this example, we will describes the Semantic-UI Card Image Content.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Semantic-UI Card Image Content
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Card Image Content</h3>

        <div class="ui card">
            <div class="ui slide masked reveal image">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400.jpg"
                    class="visible content">

                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                    class="hidden content">
            </div>

            <div class="extra content">
                <div class="left floated">
                    <i class="comments icon"></i> 101
                </div>

                <div class="right floated author">
                    Author: <i>Sandeep Jain</i>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will describes the Semantic-UI Card Image Content.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Semantic-UI Card Image Content
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Card Image Content</h3>

        <div class="ui special cards">
            <div class="card">
                <div class="blurring dimmable image">
                    <div class="ui inverted dimmer">
                        <div class="content">
                            <div class="center">
                                <div class="ui primary button">
                                    Like
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
                </div>

                <div class="extra content">
                    <div class="left floated">
                        <i class="like icon"></i> 101
                    </div>
    
                    <div class="right floated author">
                        Author: <i>Sandeep Jain</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('.special.cards .image').dimmer({
            on: 'hover'
        });
    </script>
</body>

</html>

Output:

Reference: https://semantic-ui.com/views/card.html#image

Semantic-UI Card Content

ashokjaiswal

Improve

Article Tags :

Semantic-UI Card Image Content

Similar Reads

Thank You!

What kind of Experience do you want to share?