[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/14082024/Data/htdocs/htdocs/pmb2/application/views/ [ Home ]

File: style.css

.jumbotron {
  padding-top: 7rem;
  background-color: #e2edff;
}
#projects {
  background-color: #e2edff;
}
section {
  padding-top: 8rem;
}
.gallery-img {
  width: 100%;
}

/* My COncert Section */
.concert-box
{
  position: relative;
  background-color: #0c6edd;
  border-radius: 10px;
  height: 500px;
  transform-style: preserve-3d;
}
.concert-box::before{
  content: 'My';
  position: absolute;
  color: #fff;
  font-size: 6em;
  font-weight: bold;
  font-style: italic;
  top: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: 0.5s;
}

.concert-box:hover::before{
  
  opacity: 0.2;
}
.concert-box::after{
  content: 'Event';
  position: absolute;
  color: #fff;
  font-size: 4.3em;
  font-weight: bold;
  font-style: italic;
  top: 350px;
  left: -100%;
  opacity: 0;
  transition: 0.5s;
}
.concert-box:hover::after{
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0.2;
}
.concert-name
{
  top: 0;
  width: 100%;
  position: absolute;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: 0.5s;
  transform: translate3d(0, 0, 50px);
}

.concert-box:hover .concert-name
{
  top: 20px;
  opacity: 1;
}

.concert-detail-button{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 50px);
  opacity: 0;
  transition: 0.5s;
}
.concert-box:hover .concert-detail-button
{
  opacity: 1;
  bottom: 20px;
}
.concert-img
{
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate3d(-50%, -52%, 100px);
  max-width: 350px;
  transition: 0.5s;
}
.concert-box:hover .concert-img
{
  transform: translate3d(-50%, -52%, 100px) rotate(5deg) scale(1.2);
}