minor change

Shilpi Saini
1 parent af22f99f8c
Showing 3 changed files with 41 additions and 4 deletions Show diff stats
css/custom.css
pages/caricatures.html
pages/paytmCaricatures.html
@@ -1252,6 +1252,39 @@ input.hidden {
     height: auto;
     cursor: pointer;
 }
+.container {
+  position: relative;
+  width: 50%;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  transition: .5s ease;
+  background-color: #FF6600;
+}
+
+.container:hover .overlay {
+  opacity: 1;
+}
+
+.text {
+  color: white;
+  font-size: 22px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
  
 .title{
   text-align: center;
@@ -17,9 +17,11 @@
                <div class="txt">Ahmedabad</div>
             </div> -->
             <div class="col-md-4 col-sm-8 color" style="margin-top: 5%;">
-               <div class="card1">
+               <div class="container">
                   <img class="card-img-top" src="images/mumbai.png">
-                  <img class="img-top">
+                  <div class="overlay">
+                     <div class="text">Sold Out</div>
+                  </div>
                </div>
                <div class="txt">IIT Bombay</div>
                <div class="txt1">Mumbai | September 4th, 2019</div>
@@ -3,9 +3,11 @@
       <div class="stages card-align">
           <div class="row">
              <div class="col-md-4 col-sm-8 color" style="margin-top: 5%;">
-                <div class="card1">
+                <div class="container">
                    <img class="card-img-top" src="images/mumbai.png">
-                   <img class="img-top">
+                   <div class="overlay">
+                     <div class="text">Sold Out</div>
+                  </div>
                 </div>
                 <div class="txt">IIT Bombay</div>
                 <div class="txt1">Mumbai | September 4th, 2019</div>
...	...	@@ -1252,6 +1252,39 @@ input.hidden {
1252	1252	height: auto;
1253	1253	cursor: pointer;
1254	1254	}
	1255	+.container {
	1256	+ position: relative;
	1257	+ width: 50%;
	1258	+}
	1259	+
	1260	+.overlay {
	1261	+ position: absolute;
	1262	+ top: 0;
	1263	+ bottom: 0;
	1264	+ left: 0;
	1265	+ right: 0;
	1266	+ height: 100%;
	1267	+ width: 100%;
	1268	+ opacity: 0;
	1269	+ transition: .5s ease;
	1270	+ background-color: #FF6600;
	1271	+}
	1272	+
	1273	+.container:hover .overlay {
	1274	+ opacity: 1;
	1275	+}
	1276	+
	1277	+.text {
	1278	+ color: white;
	1279	+ font-size: 22px;
	1280	+ position: absolute;
	1281	+ top: 50%;
	1282	+ left: 50%;
	1283	+ -webkit-transform: translate(-50%, -50%);
	1284	+ -ms-transform: translate(-50%, -50%);
	1285	+ transform: translate(-50%, -50%);
	1286	+ text-align: center;
	1287	+}
1255	1288
1256	1289	.title{
1257	1290	text-align: center;
...	...
...	...	@@ -17,9 +17,11 @@
17	17	<div class="txt">Ahmedabad</div>
18	18	</div> -->
19	19	<div class="col-md-4 col-sm-8 color" style="margin-top: 5%;">
20		- <div class="card1">
	20	+ <div class="container">
21	21	<img class="card-img-top" src="images/mumbai.png">
22		- <img class="img-top">
	22	+ <div class="overlay">
	23	+ <div class="text">Sold Out</div>
	24	+ </div>
23	25	</div>
24	26	<div class="txt">IIT Bombay</div>
25	27	<div class="txt1">Mumbai \| September 4th, 2019</div>
...	...
...	...	@@ -3,9 +3,11 @@
3	3	<div class="stages card-align">
4	4	<div class="row">
5	5	<div class="col-md-4 col-sm-8 color" style="margin-top: 5%;">
6		- <div class="card1">
	6	+ <div class="container">
7	7	<img class="card-img-top" src="images/mumbai.png">
8		- <img class="img-top">
	8	+ <div class="overlay">
	9	+ <div class="text">Sold Out</div>
	10	+ </div>
9	11	</div>
10	12	<div class="txt">IIT Bombay</div>
11	13	<div class="txt1">Mumbai \| September 4th, 2019</div>
...	...