We Keep Coding

is there a way for me to make a custom scrollbar appear on the left instead of the right?

I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the right side, but I want to move it over to the left. Is this possible?
body::-webkit-scrollbar {
width: 0px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
.CONT {
position: relative;
top: -25px;
left: 20px;
}
.CONT_2 {
position: relative;
top: 25px;
left: 20px;
height: 100px;
}
#words {
top: -2px;
left: 25px;
position: relative;
}
#words2 {
top: 2px;
left: 25px;
position: relative;
}
.DOC_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 16px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 280px;
z-index: 1;
overflow: hidden;
height: 46px;
}
#HTML_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 75px;
left: 15px;
}
#CSS_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 125px;
left: 15px;
}
#JAVA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 175px;
left: 15px;
}
#JQUERY_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 225px;
left: 15px;
}
#LUA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 275px;
left: 15px;
}
#ICON_1 {
position: absolute;
top: 0px;
left: 200px;
}
#icon2 {
position: absolute;
top: 2px;
left: 180px;
}
#ICON_2 {
position: absolute;
top: 4px;
left: 118px;
}
#icon3 {
position: absolute;
top: 2px;
left: 100px;
}
div.DOC_CONTAINER.expanded {
width: 390px;
height: 395px;
top: 16px;
left: -4px;
position: relative;
animation-name: Expand1;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.WEBVAR_CONTAINER.EXPAND {
width: 390px;
height: 395px;
top: 35px;
left: -4px;
position: relative;
animation-name: Expand2;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes Expand2 {
0% {
height: 70px;
}
100% {
height: 280px;
}
}
#keyframes Expand1 {
0% {
height: 70px;
}
100% {
height: 421px;
}
}
#SEP2 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 65px;
left: -27px;
}
#SEP3 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#SEP4 {
width: 370px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 135px;
left: 0px;
}
#SEP5 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#CREDITS {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 30px;
left: 20px;
}
#ABOUT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 100px;
left: 20px;
}
#COPY_RIGHT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 170px;
left: 20px;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #1f1f1f;
width: 350px;
height: 85vh;
top: 127px;
left: -5px;
position: absolute;
overflow-x: hidden;
text-align: justify;
border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
width: 5px;
color: #0088FF;
height: 25px;
}
.scroll::-webkit-scrollbar-track {
background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
background: #0088FF;
}
.flip {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
.flip2 {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
#MENU_LABEL {
color: #2E2E2E;
top: 11px;
left: 45vw;
position: absolute;
font-size: 20px;
font-family: verdana;
}
body {
height: 200vh;
background-color: #2E2E2E;
}
a {
color: #0088ff;
text-decoration: none;
}
a:hover {
color: #0056A3;
text-decoration: none;
}
.WEBVAR_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 35px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 390px;
z-index: 1;
overflow: hidden;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<div class="DOC_CONTAINER">
<div id="SEP3"></div>
<div id="words">Documentation</div>
<div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words').click(function(event) {
event.preventDefault();
$(".DOC_CONTAINER").toggleClass('expanded');
$("#ICON_1").toggleClass("flip");
});
});
</script>
<div class="CONT">
<div id="HTML_DOC">HTML</div>
<div id="CSS_DOC">CSS</div>
<div id="JAVA_DOC">Javascript</div>
<div id="JQUERY_DOC">Jquery</div>
<div id="LUA_DOC">Lua</div>
</div>
</div>
<div id="SEP2"></div>
<div class="WEBVAR_CONTAINER">
<div id="SEP5"></div>
<div id="words2">WebVar</div>
<div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words2').click(function(event) {
event.preventDefault();
$(".WEBVAR_CONTAINER").toggleClass('EXPAND');
$("#ICON_2").toggleClass("flip2");
});
});
</script>
<div class="CONT_2">
<div id="CREDITS">Credits</div>
<div id="ABOUT">About</div>
<div id="COPY_RIGHT">Copyright</div>
</div>
</div>
<div id="SEP4"></div>
</div>
I tried setting float but that didn't work. If there is a solution please enlighten me.

Easy way to move scrollbar to the left side:
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
transform: rotateY(180deg);
}
.scroll-at-left>section {
padding: 0 1em;
transform: rotateY(180deg);
}
<div class="scroll-at-left">
<section>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
</section>
</div>

You can set the div to right text align and the text to left text align.
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
direction: rtl;
}
.scroll-at-left section {
padding: 0 1em;
direction: ltr;
}
<div class="scroll-at-left">
<section>
<p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
</section>
</div>

Why are these input and text parts on the right side, if they supposed to be on the center?

I have a problem whit my new project. A login system. I did it from a youtube video: https://youtu.be/cxm5bCCa9OA . Everything works perfectly, It just bothers me, that my text is right-sided instead of centered, but the YouTuber's text is fine. I think I have the same code. I think The problem might be with the form's border or the positioning of my Texts.
My Log in system:
The YouTuber's Log in system:
My code is also here:
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<center>
<div class="box">
<div class="form">
<h4>Log In
<h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>
</center>

To center those inputs you may add a margin-left and a margin-right of auto to .inputBox. Or simply change this:
.inputBox {
position: relative;
width: 300px;
margin-top: 35px; /** change this */
}
into this:
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0; /** into that */
/**
* the above rule means:
* - 35px as margin top
* - left and right margins set to "auto" which horizontally centers your ".inputBox"
* - 0px as margin bottom
*/
}
And here's a live demo (made some changes to your code because you had some tags that were not closed)
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<div class="box">
<div class="form">
<h4>Log In</h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>

Compared to the video, you are missing a padding: 50px 40px; in the .form part.
Try replacing your .form css with this:
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
UPDATE: furthermore, there is an issue with the <h4> tag which is opened twice. Maybe you should have <h4>Log In</h4>.

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

How to create this icon with text inside?

I have already created burst put facing problem with putting number inside burst.So i need help for fix it
Need to look like Image burst.
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
transform: rotate(45deg);
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
background: #00aaad;
transform: rotate(45deg);
}
<div id="burst-8"></div>

Not exactly sure what you want, see if the following answer helps.
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
font-size: 12px;
position: absolute;
text-align: center;
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
background: #00aaad;
transform: rotate(45deg);
z-index: -1;
}
<div id="burst-8">99</div>

Try setting content property
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
transform: rotate(-45deg);
}
#burst-8:after {
content: "99";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
font-size: 13px;
background: #00aaad;
transform: rotate(45deg);
}
<div id="burst-8"></div>
Using attr()
#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
transform: rotate(-45deg);
}
#burst-8:after {
content: attr(data-burst);
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
font-size: 13px;
background: #00aaad;
transform: rotate(45deg);
}
<div id="burst-8" data-burst="99"></div>

First you don't need to rotate the div element rotate only pseudo element and
then setting pseudo element to the lower level than div element with z-index can fix it.
Positions work as layering of elements and z-index handles layer order.
#burst-8 {
background: #00aaad;
width: 25px;
height: 25px;
margin: 4px;
color: white;
position: absolute;
text-align: center;
font-size: 12px;
line-height:25px;
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background: #00aaad;
transform: rotate(45deg);
z-index: -1;
}
<div id="burst-8">99</div>

#burst-8 {
background: #00aaad;
width: 15px;
height: 15px;
margin: 4px;
font-size: 12px;
position: absolute;
text-align: center;
}
#burst-8:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 15px;
color: white;
width: 15px;
background: #00aaad;
transform: rotate(45deg);
z-index: -1;
}
<div id="burst-8">99</div>

Text getting misaligned on hover

I'm building an image component with caption.
When the user mouse hover on the text on hover of the div element, it is changing the position of the text:
JSFiddle URL: https://jsfiddle.net/9jkze0o4/
CSS:
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
border-style: solid;
border-width: 28px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
On hover of the image, how to keep the text position as is?

Looks like your selector is not right when hovering. When hovering the inner-div all the styles applies to everything inside that block including the caption. To overcome this problem you will need to give the :hover to the box.
You can change this,
innder-div:hover
to be this,
box:hover
in your styles.
See the fiddle - https://jsfiddle.net/anjanasilva/jkwL3n0g/
Hope this helps.
Cheers.

You have to change inner-div:hover to box:hover
Here's a working Fiddle: https://jsfiddle.net/9jkze0o4/3/

This issue is because of the border-width:28px to class .inner-div:hover remove .inner-div:hover and give border to class .inner-div:hover .box as shown below:
.inner-div:hover .box {
border: 28px solid rgb(67, 67, 67);
}
* {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
.inner-div:hover .box {
border: 28px solid rgb(67, 67, 67);
}
.box {
height: 100%;
display: block;
}
.box-label {
display: list-item;
margin: 0px auto;
line-height: 100%;
vertical-align: middle;
height: 100%;
overflow: hidden;
}
.box-label img {
position: relative;
top: 50%;
transform: translate(100%, -50%);
vertical-align: middle;
border-radius: 0px;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
.overlay {
background: rgba(52,152,219,0.49);
color: #FFFFFF;
text-align: center;
font-size: 40px;
border-radius: 13px;
margin-top: 0px;
cursor: pointer;
display: none;
vertical-align: middle;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 1;
width: 100%;
height: 100%;
z-index: 1;
transition: display 0.5s;
}
.overlay-icon {
color: #FFFFFF;
font-size: 40px;
line-height: 100%;
}
.overlay-icon i {
display: block;
border-radius: 5px;
overflow: hidden;
vertical-align: middle;
opacity: 0;
top: 100%;
left: 50%;
transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
transform: translateX(-50%);
}
.caption-box {
font-size: 16px;
text-align: center;
color: #000000;
font-weight: bold;
margin-top: 0px;
word-break: break-word;
word-break: break-all;
line-height: normal;
vertical-align: middle;
display: inline-block;
z-index: 2;
text-align: center;
margin: 10px auto 20px auto;
height: auto;
width: 150px;
}
.caption-label {
vertical-align: top;
margin: 0px auto;
padding-right: 3px;
display: list-item;
line-height: 100%;
overflow: hidden;
word-break: break-word;
font-weight: inherit;
border: none !important;
min-width: 100px;
max-width: 150px;
}
<div class="inner-div">
<div class="box">
<label class="box-label">
<img src="https://img00.deviantart.net/f33c/i/2011/139/f/c/vertical_panorama_by_verticaldubai-d3gp1ja.jpg" alt="Image" />
<div class="overlay">
<div class="overlay-icon">
<i class="fa fa-hand-o-up"></i>
</div>
</div>
</label>
</div>
<div class="caption-box">
<label class="caption-label">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</label>
</div>
</div>