Css Integerations

utility classes

Images and Thumbnails

The class "image-thumb" can be used to access the thumbnail class properties which are useful when designing images. The image below is an example of thumbnail:

An example of image thumbnail

Study

sample code structure 1

  <div class="image-thumb bd-1 bd bd-red pxv-10 mvt-10">

    <div class="image b-cover px-180" data-src="https://spoova.com/res/assets/images/bkg.jpg">

        <div class="image-label ov-d5 c-white c-silver calibri" data-anime="slide-up">Study</div>
    
    </div>

  </div>

In the code above,

image-thumb parent class defines the thumbail box.
image direct child class defines the thumbail box.
image-label class defines the image label.
A height of 180 pixels was set on the image element. This height defines the entire height of the thumbnail's image excluding any external padding

Slide-up Labels

By adding the attribute data-anime="slide-up" to labels, the label will only be displayed once the class name slide-up is added to it. This can be done using javascript. Howvever, another way to achieve a slide-up without using javascript is to set the class of the image label to "on-hover" just as shown below.

sample code structure 2

  <div class="image-thumb bd-1 bd bd-red pxv-10 mvt-10">

    <div class="image b-cover px-180" data-src="https://spoova.com/res/assets/images/bkg.jpg">

        <div class="image-label on-hover ov-d5 c-white c-silver calibri" data-anime="slide-up">Study</div>
    
    </div>

  </div>

Hover on image to display label

Study

When there are large overflowing texts, the data-anime="slide-up-scroll" may be preferred over the normal slide up as show below.

sample code structure 3

  <div class="image-thumb bd-1 bd bd-red pxv-10 mvt-10">

    <div class="image b-cover px-180" data-src="https://spoova.com/res/assets/images/bkg.jpg">

        <div class="image-label on-hover ov-d5 c-white c-silver calibri" data-anime="slide-up-scroll">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Vitae molestias voluptates nam necessitatibus obcaecati, 
            culpa libero eaque distinctio praesentium cumque provident 
            quis iste omnis laboriosam vero labore voluptatem explicabo consectetur.
            
        </div>
    
    </div>

  </div>

Effect of "slide-up-scroll"

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Non-Overflowing Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae molestias voluptates nam necessitatibus obcaecati, culpa libero eaque distinctio praesentium cumque provident quis iste omnis laboriosam vero labore voluptatem explicabo consectetur.

Overflowing Text

Background Image positioning

The classes b-cover, b-contain are used to set image background-size property to cover and contain respectively. Each of these classes have a background-repeat set to no-repeat. Other classes under this are listed below:

b-center - sets the background image to "center top" position
b-fluid - auto fits background images based on screen size.
b-parallax - gives a parallax effect on images
b-clip - sets background-clip property to "padding-box"
im-fixed - sets background-attachment property to "fixed"

b-center

b-cover

b-contain

b-parallax

b-fluid

b-cover b-clip

im-fixed