css - how to add both overlay color and background color for the same element -


i not able add overlay element. have tried :before it's not working.

.bot-about li {    display: inline-block;    padding: 5px 15px;  }    .bot-about li img {    border-radius: 50%;    height: 50px;    width: 50px;    padding: 3px;    /*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);*/    margin: 10px 10px 0 10px;    -webkit-transition: box-shadow 0.3s ease;    -moz-transition: box-shadow 0.3s ease;    transition: box-shadow 0.3s ease;    position: relative;  }    .bot-about li img:hover {    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);  }    .bot-header {    color: rgba(255, 85, 70, .8);    text-align: left;    margin-left: 10%;    font-size: 16px;  }    .bot-about {    position: relative;  }    .bot-img-text {    position: relative;    left: 0;    right: 0;  }    .bot-about li {    position: relative;  }    .bot-about .item {    vertical-align: middle;    display: inline-block;    text-align: center;  }    .bot-about img {    width: 100px;    height: 100px;  }    .bot-about .caption {    display: block;    margin-left: 2px;    margin-top: 10px;  }
<div class="bot-container">    <div class="bot-cards">      <div class="bot-card">        <div class="bot-about">          <!-- skills section -->          <div class="bot-header">            connections          </div>          <ul>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="c">                </a>                <span class="caption">concept</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="e">                </a>                <span class="caption">exam</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="f">                </a>                <span class="caption">formula</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="t">                </a>                <span class="caption">test</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="v">                </a>                <span class="caption">video</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="q">                </a>                <span class="caption">quiz</span>              </div>            </li>          </ul>        </div>      </div>    </div>  </div>

hope helps. have added pseudo after element item 

.bot-about li {    display: inline-block;    padding: 5px 15px;  }    .bot-about li img {    border-radius: 50%;    height: 50px;    width: 50px;    padding: 3px;    /*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);*/    margin: 10px 10px 0 10px;    -webkit-transition: box-shadow 0.3s ease;    -moz-transition: box-shadow 0.3s ease;    transition: box-shadow 0.3s ease;    position: relative;  }    .bot-about li img:hover {    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);  }    .bot-header {    color: rgba(255, 85, 70, .8);    text-align: left;    margin-left: 10%;    font-size: 16px;  }    .bot-about {    position: relative;  }    .bot-img-text {    position: relative;    left: 0;    right: 0;  }    .bot-about li {    position: relative;  }    .bot-about .item {    vertical-align: middle;    display: inline-block;    text-align: center;  }    .bot-about .item:before{  		  position: absolute;  		  content:"";  		  top:0;  		  left:0;  		  width:100%;  		  height:100%;        background-color:rgba(0,0,0,.5);  }    .bot-about img {    width: 100px;    height: 100px;  }    .bot-about .caption {    display: block;    margin-left: 2px;    margin-top: 10px;  }
<div class="bot-container">    <div class="bot-cards">      <div class="bot-card">        <div class="bot-about">          <!-- skills section -->          <div class="bot-header">            connections          </div>          <ul>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="c">                </a>                <span class="caption">concept</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="e">                </a>                <span class="caption">exam</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="f">                </a>                <span class="caption">formula</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="t">                </a>                <span class="caption">test</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="v">                </a>                <span class="caption">video</span>              </div>            </li>            <li>              <div class="item">                <a href="#">                  <img src="https://via.placeholder.com/50x50" class="q">                </a>                <span class="caption">quiz</span>              </div>            </li>          </ul>        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more