E-Book by Glide. I tried to represent the new button bar with a small circle for page transitions

Project Showcase
22

The CSS of the text above the image is written as follows.

<img class="main_img" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/uiPKquck3pdF45ZWLWDB/pub/2y5uGhomIGxW2zITObKS.jpg">
<p class="ptext_01">Enter any text</p>
<p class="ptext_02">Enter any text</p>
<style>
.main_img { 
width:345px;
height:345px;
object-fit: cover;
}
p.ptext_01,p.ptext_02 { 
position: absolute;
top: 0;
font-size: 1.2em; 
color: #000;
background: rgba(255,255,255,0.6); 
padding:20px 5px 10px 5px ; 
writing-mode: vertical-rl;
}
p.ptext_01 { right: 8%; } 
p.ptext_02 { right: 18%; }
</style>
3 Likes
24

Using the floating button is clever, but I don’t care for the location of it (right on the shadow line).

1 Like