Jump to content
Sign in to follow this  
soprano

virsraksts augšā nevis sānā???

Recommended Posts

  <div class="section-name">INDUSTRY OPINION</div>



    <div class="news-box-medium ">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Alternative_Energies.jpg/1200px-Alternative_Energies.jpg" alt="">
<div class="overlay"></div>
<span class="label">23.Sep 2018 10:08  |  33 komentāri</span>
<div class="gradient"></div>
<h2 class="title">Lorem ipsum is placeholder text commonly used</h2>
</div>
.medium-news{
  width: 300px;
}

.gradient {
  background: #D3959B;
  background: -webkit-linear-gradient(to top, #17191d, rgba(211, 149, 155, 0));
  background: linear-gradient(to top, #17191d, rgba(211, 149, 155, 0));
  position: absolute;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}

.label {
  position: absolute;
  z-index: 9999;
  color: #676e7c;
  bottom: 10px;
  left: 0px;
  text-transform: uppercase;
  padding: 0.3em 1.2em;
  font-weight: 600;
  font-size: 12px;
}

.news-box-medium {
  background: white;
  position: relative;
  width: 260px;
 height: 400px;
  overflow: hidden;
  float: left;
  margin-left:20px;
}
.news-box-medium img {
  max-height: 45em;
  max-width: 50em;
  min-width: 50em;
  margin-left: -50%;
  margin-top: -20%;
}
.news-box-medium .title {
  position: absolute;
  z-index: 999;
  bottom:10px;
  color: white;
  padding-left: 30px;
  font-weight: 600;
  padding: 20px;
  font-size: 18px;
  line-height: 1.4;
}
.section-name {
  margin-top: 1.4em;
  margin-bottom: 1.8em;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
  letter-spacing: 3px;
  margin-left: 3em;
  padding-left: 1em;
  background: white;
  z-index: 9999;
  position: relative;
  width: auto;
  max-width: 9em;
  z-index: 999;

}
Spoiler

thumbnail

 

Share this post


Link to post
Share on other sites

Skaties, ka kāds CSS vēl neietekmē tavu to "sekcijas vārdu", jo uzliekot uz to pašu codepen.io tavu doto kodu, itkā +/- rāda tavu vēlamo rezultātu.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.