Mobile Sidenav - CSS Only

Carousel - CSS Only

Tab Container - CSS Only

Accordion - CSS Only

Modal Box Dialog - CSS Only

<div class="modal-container check">
  <input id="modal-toggle" type="checkbox">
  <label class="modal-btn" for="modal-toggle">Modal</label> 
  <label class="modal-backdrop" for="modal-toggle"></label>
  <div class="modal-content">
    <label class="modal-close" for="modal-toggle">&#x2715;</label>
    <h2>Modal title</h2><hr />
    <p>Hello from inside the modal!</p> 
    <label class="modal-content-btn" for="modal-toggle">OK</label>   
  </div>          
  </div>

Make ToolTip Click/Hover - CSS Only

<div class="tooltip-container check">
  <input id="tooltip-toggle" type="checkbox">
  <label class="tooltip-btn" for="tooltip-toggle">Tooltip click</label> 
  <label class="tooltip-backdrop" for="tooltip-toggle"></label>
  <div class="tooltip-content">
    <p>Hello from inside the CSS tooltip!</p> 
  </div>          
</div>

<div class="tooltip-container">
  <div class="tooltip-btn tooltip-toggle">Tooltip hover</div> 
  <div class="tooltip-content">
    <p>Hello from inside the CSS tooltip!</p> 
  </div>          
  </div>

5-star rating - CSS Only

<div class="star-container">
  <input type="radio" name="starred" id="five"/> 
  <input type="radio" name="starred" id="four"/> 
  <input type="radio" name="starred" id="three"/>
  <input type="radio" name="starred" id="two"/>
  <input type="radio" name="starred" id="one"/>
  <label for="one"></label>
  <label for="two"></label>
  <label for="three"></label>
  <label for="four"></label>
  <label for="five"></label>
  </div>

Steps Container - CSS Only

Toggle Read More - CSS Only

<div class="readmo">
  <input type="checkbox" id="toggler" /> 
  <label for="toggler"></label>
  <p>BLEH BLAH BLOH</p>
</div>

BONUS

Pure CSS Modal - 📦 Button - Pricing - pure css - Menu Hover Interaction - CSS Gradient Text - Pink Lemonade - Neumorphism Social Share Button - Practicalmorphism Social Share Button - Card component with floating labels - CSS leaning card effect - Search Input Caret Jump - Mark text effect on scroll w/ IO - Image masking with pure CSS - Danganronpa click effect (first attempt) - Menu Hover Slide Fill - Turning pages with CSS - Responsive components without media-queries - Candy Color Button Animation - CSS3 Loader & Spinners - No Javascript Table with Pagination - Custom Cursor Effect - Warning - Dashed Border Generator - Black & White Button - Color Palette Generator - Radio button styling - SVG viewBox - Glowing Text - Fancy Navigation (+ hover effects) - Draw SVG to Canvas and Save to Files - Even lines background effects on text - Simple animation timeline - CSS Spotlight - Hover Highlight Effect - Pure CSS Project Filter Tabs - Tasty Menu - Error 404 - Ripped images - Code Scrubber - 📁Folder 📁 Animation using scss iteration - Page Turn Animation using Turn JS - Color Search - Color search engine w/ React && GSAP 🎨 - Share Button Hidden Icon - Lake image with water ripples - Floating Image - Animated Buttons - Soft UI Buttons

Silah sobat kunjungi, dijamin maknyus :-bd

<div class="rimss">
  <div class="rims" style="--img: url(LINK_IMAGE-1);"></div>
  <div class="rims" style="--img: url(LINK_IMAGE-2)"></div>
  <div class="rims" style="--img: url(LINK_IMAGE-3)"></div>
</div>

<div class="compare">
<div class="toggle-column">
  <img src="PATH_IMG" />
</div>
<div class="vs-column">
  <div class="vs">vs</div>
</div>
<div class="toggle-column">
<p>BLAH-BLEH-BLOH</p>
</div>
</div>

BON US

Hover with Clip-Path Effect - Sliding tabs | CSS transitions only - Image Compare Viewer - CSS Speech Bubble (svg data uri) - Holiday Feature Folding Cards - Expand Information - NOISY IMAGE GRID - Image Hovers - Card Reveal - CPC - Image hover - Shifting Image on Hover - Image Magnifier Glass on Hover - CSS Image Hover Effects - Random Picker (Image Hover) - Extreme Hover - HTML + CSS - CSS Clip-Path Hover Effect - Custom Search - TGMT - Morse - CSS Image Gallery - Declaring Bits of Unselectable Text - CSS Image Hover Effects - Very Simple Pure CSS Carousel - CSS-only modal - CSS variable image zoom 🔍😅 - Select All... Then Select Some - A Pen by ycw - Pure CSS "Authentication" 😅🔒 - Pure-CSS Tooltips - A Very Simple Pure CSS 3D Room - px2rem - CSS Only, Content Overflow Shadows - Button Neon (: hover fx) - Border Buttons - Social Media Buttons Hover Effect - Pure CSS navigation toggle animation - Movie Ticket Animation - Loop 23 - Gradient border - Button Hover

Happy blogging lah \m/

<div class="colors_shadows">
 <img src="URL-IMAGE" alt="" />
 <img src="URL-IMAGE" class="large-shadow" alt="" />
</div>

Masih ingat dengan hal diatas Pertama gue mendapatkan ini..., sebagai bloglang gue telusuri dari mana sumbernya. Ternyata mentok ke cosha. Silah kunjungi halaman tsb jika ingin memakai versi script dan tentunya memakai shiny new picture tag :P
Petualangan masih berlanjut, aku satroni web empunya guys dgn alamat http://robinloeffel.ch/ We..ee...eee ternyata disana ada hal sedikit berbeda dengan trik diatas? Gue nemuin gambar ditutupi dengan warna bergaya gradient sebagai pelapisnya (kue kelezzz lapis) :))

Ketika melakukan hover/sorot ke gambar, maka akan sirna gradient background and title as protector!Aslinya memakai script dengan berbagai embel-embel keren lain yg dibawanya. Gue hidupkan developer tools browser, dan mulai beraksi comot sana-sini dan diperoleh...

.robin_title {
 font-size: 202%;
 position: absolute;
 text-align: center;
 transition: opacity .5s ease-in-out;
}
.robin_image {
 z-index: -1;
 object-fit: cover;
 object-position: center;
}
.robin_image,.robin_link {
 padding: 0;
 height: auto;
 width: 500px;
 max-width: 100%;
 margin: 0 auto;
 position: relative;
}
.robin_link {
 z-index: 1;
 display: flex;
 color: white;
 overflow: hidden;
 border-radius: 15px;
 align-items: center;
 text-decoration: none;
 justify-content: center;
 transition: transform .5s ease-in-out;
}
.robin_link:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 border-radius: inherit;
 box-sizing: border-box;
 background-color: #444;
 transition: opacity .5s ease-in-out;
}
.robin_link.pengki:after {
 background: linear-gradient(180deg,rgba(58,28,113,.5),rgba(253,187,45,.5));
}
.robin_link.pingki:after {
 background: linear-gradient(90deg,rgba(255,0,132,.5),rgba(255,255,255,.5));
}
.robin_link:hover {
 transform: scale(1.05);
}
.robin_link:hover .robin_title,.robin_link:hover:after {
 opacity: 0;
}

<a class="robin_link pingki" href="LINK-TUJUAN" title="">
 <h2 class="robin_title">PINGKI</h2>
 <img class="robin_image" src="URL-IMAGE" alt=""/>
</a>

Saya hanya seorang blogger dengan guru bernama ONE (Otodidak NEkat). Harap maklum jika ada kesalahan dalam aturan pengkodean. Koreksi dan benarkan menurut aturan oleh kalian ya :)

Button Effect - 3D Editable Text Effect - Rainbow Effect - Animate feTurbulence Filter - Turbulence - Color: Your name as a color - Password generator - Card hover FX - Wave Text - dashed border icon animations - Native smooth scrolling - How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript - Placeholder support for contentEditable elements, without JavaScript - Useful Broken Images - Stacked rainbow cards - Extract colors from Image (React) - Neumorphic Color Palette - Digital Bookshelf - Parallax Horizontal Image Scroller -- No JS! - Glass Effect with CSS Masks - Exciting Multi-line Highlights - Buttons popper - Adding an image to a document... - Tucked Corners - AppleTV 3D Parallax Cards - Dynamic Active Table of Contents - Card Hover Interaction | HTML & CSS - Goldsmiths Uni - glitch - Search animation - Only CSS - Masked & Skewed - Website Hero