how to create and place a semi transparent layer on top of another div in css [duplicate]












2
















This question already has an answer here:




  • Darken image overlay and add text over it in CSS

    4 answers




I have an image class named image and a div named semitransparent.



i want to create a semitransparent background color in css, so that the image in image class can be seen through it



How to create this semi transparent color in css?






.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div












share|improve this question













marked as duplicate by Kraylog, cнŝdk, Rob, 585connor, Deadpool Nov 21 '18 at 20:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • @kraylog is it possible to give a semi transparent background color in css?

    – Jupiter
    Nov 21 '18 at 12:11











  • you can set the color with rgba

    – vals
    Nov 21 '18 at 12:22











  • @Jupiter indeed it is, take a look at the question I linked

    – Kraylog
    Nov 21 '18 at 12:36
















2
















This question already has an answer here:




  • Darken image overlay and add text over it in CSS

    4 answers




I have an image class named image and a div named semitransparent.



i want to create a semitransparent background color in css, so that the image in image class can be seen through it



How to create this semi transparent color in css?






.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div












share|improve this question













marked as duplicate by Kraylog, cнŝdk, Rob, 585connor, Deadpool Nov 21 '18 at 20:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • @kraylog is it possible to give a semi transparent background color in css?

    – Jupiter
    Nov 21 '18 at 12:11











  • you can set the color with rgba

    – vals
    Nov 21 '18 at 12:22











  • @Jupiter indeed it is, take a look at the question I linked

    – Kraylog
    Nov 21 '18 at 12:36














2












2








2









This question already has an answer here:




  • Darken image overlay and add text over it in CSS

    4 answers




I have an image class named image and a div named semitransparent.



i want to create a semitransparent background color in css, so that the image in image class can be seen through it



How to create this semi transparent color in css?






.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div












share|improve this question















This question already has an answer here:




  • Darken image overlay and add text over it in CSS

    4 answers




I have an image class named image and a div named semitransparent.



i want to create a semitransparent background color in css, so that the image in image class can be seen through it



How to create this semi transparent color in css?






.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div







This question already has an answer here:




  • Darken image overlay and add text over it in CSS

    4 answers







.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div





.semitransparent{
width:300px;
height:300px;
}

.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}

<div class="semitransparent">
<div class="image">
</div>
</div






html css css3






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 '18 at 12:03









JupiterJupiter

11012




11012




marked as duplicate by Kraylog, cнŝdk, Rob, 585connor, Deadpool Nov 21 '18 at 20:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Kraylog, cнŝdk, Rob, 585connor, Deadpool Nov 21 '18 at 20:25


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • @kraylog is it possible to give a semi transparent background color in css?

    – Jupiter
    Nov 21 '18 at 12:11











  • you can set the color with rgba

    – vals
    Nov 21 '18 at 12:22











  • @Jupiter indeed it is, take a look at the question I linked

    – Kraylog
    Nov 21 '18 at 12:36



















  • @kraylog is it possible to give a semi transparent background color in css?

    – Jupiter
    Nov 21 '18 at 12:11











  • you can set the color with rgba

    – vals
    Nov 21 '18 at 12:22











  • @Jupiter indeed it is, take a look at the question I linked

    – Kraylog
    Nov 21 '18 at 12:36

















@kraylog is it possible to give a semi transparent background color in css?

– Jupiter
Nov 21 '18 at 12:11





@kraylog is it possible to give a semi transparent background color in css?

– Jupiter
Nov 21 '18 at 12:11













you can set the color with rgba

– vals
Nov 21 '18 at 12:22





you can set the color with rgba

– vals
Nov 21 '18 at 12:22













@Jupiter indeed it is, take a look at the question I linked

– Kraylog
Nov 21 '18 at 12:36





@Jupiter indeed it is, take a look at the question I linked

– Kraylog
Nov 21 '18 at 12:36












5 Answers
5






active

oldest

votes


















2














You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
Have you heard of css-filter:blur?
Just have a class



.blur{ filter: blur(4px) }


and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/



Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.



.overlay{ position: absolute; width: 300; height: 300 }
.image{ position: relative; }


Then place the overlay inside the image DIV.



<div class="image"><div class="overlay"></div><img src="…" …></div>





share|improve this answer

































    1














    It can be done using following code -



    <div class="image">
    <div class="semitransparent">
    </div>
    </div>

    .semitransparent {
    background: black;
    opacity: 0.5;
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    }

    .image {
    background-image:url(https://picsum.photos/300/300/?random);
    width:300px;
    height:300px;
    position: relative;
    }


    Fiddle link - https://jsfiddle.net/Lvhwmy31/






    share|improve this answer


























    • great explanation works fine

      – Jupiter
      Nov 21 '18 at 12:28



















    1














    The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.



    It's sort of a css ninja style anyway :)



    You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.



        <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    </div>
    <style>
    .child1{
    background-image:url(https://picsum.photos/200/300/?random);
    width:300px;
    height:300px;
    }
    .child2{
    background-color: rgba(138, 43, 226, 0.6);
    width:300px;
    height:300px;
    position: absolute;
    top: 0px;
    }
    .parent {
    position: relative;
    height: 2000px;
    }
    </style>





    share|improve this answer
























    • does rgba support on all browsers?

      – Jupiter
      Nov 21 '18 at 12:38






    • 1





      Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

      – Damir Dautovic
      Nov 21 '18 at 12:47






    • 1





      Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

      – Damir Dautovic
      Nov 21 '18 at 12:50



















    1

















    .full {
    background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
    min-height: 300px;
    }

    .full {
    background-size: cover;
    position: relative;
    }

    .full:hover .overlay-effect {
    opacity: 1;
    cursor: pointer;
    }

    .overlay-effect {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(259, 67, 95, 0.7);
    overflow:hidden;
    }

    .full a
    {
    color: #fff;
    }

    .full h3 {
    padding: 15px 30px;
    }

    @media screen and (max-width: 368px) {
    .full{margin-bottom: 10px;}
    }

    <div class="full">

    </div>
    </div








    share|improve this answer































      1














      check this code, Change "rgba" color while you want.



      <div class="semitransparent">
      <div class="image">
      </div>
      </div
      .semitransparent{
      width:100%;
      height:100%;
      background: rgba(0, 0, 0, 0.5);

      }

      .image{
      background-image:url(https://picsum.photos/300/300/?image=206);
      width:300px;
      height:300px;

      }





      share|improve this answer
























      • great worked fine

        – Jupiter
        Nov 21 '18 at 12:40


















      5 Answers
      5






      active

      oldest

      votes








      5 Answers
      5






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      2














      You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
      Have you heard of css-filter:blur?
      Just have a class



      .blur{ filter: blur(4px) }


      and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/



      Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.



      .overlay{ position: absolute; width: 300; height: 300 }
      .image{ position: relative; }


      Then place the overlay inside the image DIV.



      <div class="image"><div class="overlay"></div><img src="…" …></div>





      share|improve this answer






























        2














        You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
        Have you heard of css-filter:blur?
        Just have a class



        .blur{ filter: blur(4px) }


        and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/



        Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.



        .overlay{ position: absolute; width: 300; height: 300 }
        .image{ position: relative; }


        Then place the overlay inside the image DIV.



        <div class="image"><div class="overlay"></div><img src="…" …></div>





        share|improve this answer




























          2












          2








          2







          You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
          Have you heard of css-filter:blur?
          Just have a class



          .blur{ filter: blur(4px) }


          and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/



          Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.



          .overlay{ position: absolute; width: 300; height: 300 }
          .image{ position: relative; }


          Then place the overlay inside the image DIV.



          <div class="image"><div class="overlay"></div><img src="…" …></div>





          share|improve this answer















          You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
          Have you heard of css-filter:blur?
          Just have a class



          .blur{ filter: blur(4px) }


          and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/



          Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.



          .overlay{ position: absolute; width: 300; height: 300 }
          .image{ position: relative; }


          Then place the overlay inside the image DIV.



          <div class="image"><div class="overlay"></div><img src="…" …></div>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 21 '18 at 12:12

























          answered Nov 21 '18 at 12:07









          flowtronflowtron

          409315




          409315

























              1














              It can be done using following code -



              <div class="image">
              <div class="semitransparent">
              </div>
              </div>

              .semitransparent {
              background: black;
              opacity: 0.5;
              position: absolute;
              top:0; left:0; right:0; bottom:0;
              }

              .image {
              background-image:url(https://picsum.photos/300/300/?random);
              width:300px;
              height:300px;
              position: relative;
              }


              Fiddle link - https://jsfiddle.net/Lvhwmy31/






              share|improve this answer


























              • great explanation works fine

                – Jupiter
                Nov 21 '18 at 12:28
















              1














              It can be done using following code -



              <div class="image">
              <div class="semitransparent">
              </div>
              </div>

              .semitransparent {
              background: black;
              opacity: 0.5;
              position: absolute;
              top:0; left:0; right:0; bottom:0;
              }

              .image {
              background-image:url(https://picsum.photos/300/300/?random);
              width:300px;
              height:300px;
              position: relative;
              }


              Fiddle link - https://jsfiddle.net/Lvhwmy31/






              share|improve this answer


























              • great explanation works fine

                – Jupiter
                Nov 21 '18 at 12:28














              1












              1








              1







              It can be done using following code -



              <div class="image">
              <div class="semitransparent">
              </div>
              </div>

              .semitransparent {
              background: black;
              opacity: 0.5;
              position: absolute;
              top:0; left:0; right:0; bottom:0;
              }

              .image {
              background-image:url(https://picsum.photos/300/300/?random);
              width:300px;
              height:300px;
              position: relative;
              }


              Fiddle link - https://jsfiddle.net/Lvhwmy31/






              share|improve this answer















              It can be done using following code -



              <div class="image">
              <div class="semitransparent">
              </div>
              </div>

              .semitransparent {
              background: black;
              opacity: 0.5;
              position: absolute;
              top:0; left:0; right:0; bottom:0;
              }

              .image {
              background-image:url(https://picsum.photos/300/300/?random);
              width:300px;
              height:300px;
              position: relative;
              }


              Fiddle link - https://jsfiddle.net/Lvhwmy31/







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Nov 21 '18 at 12:25

























              answered Nov 21 '18 at 12:20









              Rohit GargRohit Garg

              1217




              1217













              • great explanation works fine

                – Jupiter
                Nov 21 '18 at 12:28



















              • great explanation works fine

                – Jupiter
                Nov 21 '18 at 12:28

















              great explanation works fine

              – Jupiter
              Nov 21 '18 at 12:28





              great explanation works fine

              – Jupiter
              Nov 21 '18 at 12:28











              1














              The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.



              It's sort of a css ninja style anyway :)



              You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.



                  <div class="parent">
              <div class="child1"></div>
              <div class="child2"></div>
              </div>
              <style>
              .child1{
              background-image:url(https://picsum.photos/200/300/?random);
              width:300px;
              height:300px;
              }
              .child2{
              background-color: rgba(138, 43, 226, 0.6);
              width:300px;
              height:300px;
              position: absolute;
              top: 0px;
              }
              .parent {
              position: relative;
              height: 2000px;
              }
              </style>





              share|improve this answer
























              • does rgba support on all browsers?

                – Jupiter
                Nov 21 '18 at 12:38






              • 1





                Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

                – Damir Dautovic
                Nov 21 '18 at 12:47






              • 1





                Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

                – Damir Dautovic
                Nov 21 '18 at 12:50
















              1














              The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.



              It's sort of a css ninja style anyway :)



              You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.



                  <div class="parent">
              <div class="child1"></div>
              <div class="child2"></div>
              </div>
              <style>
              .child1{
              background-image:url(https://picsum.photos/200/300/?random);
              width:300px;
              height:300px;
              }
              .child2{
              background-color: rgba(138, 43, 226, 0.6);
              width:300px;
              height:300px;
              position: absolute;
              top: 0px;
              }
              .parent {
              position: relative;
              height: 2000px;
              }
              </style>





              share|improve this answer
























              • does rgba support on all browsers?

                – Jupiter
                Nov 21 '18 at 12:38






              • 1





                Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

                – Damir Dautovic
                Nov 21 '18 at 12:47






              • 1





                Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

                – Damir Dautovic
                Nov 21 '18 at 12:50














              1












              1








              1







              The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.



              It's sort of a css ninja style anyway :)



              You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.



                  <div class="parent">
              <div class="child1"></div>
              <div class="child2"></div>
              </div>
              <style>
              .child1{
              background-image:url(https://picsum.photos/200/300/?random);
              width:300px;
              height:300px;
              }
              .child2{
              background-color: rgba(138, 43, 226, 0.6);
              width:300px;
              height:300px;
              position: absolute;
              top: 0px;
              }
              .parent {
              position: relative;
              height: 2000px;
              }
              </style>





              share|improve this answer













              The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.



              It's sort of a css ninja style anyway :)



              You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.



                  <div class="parent">
              <div class="child1"></div>
              <div class="child2"></div>
              </div>
              <style>
              .child1{
              background-image:url(https://picsum.photos/200/300/?random);
              width:300px;
              height:300px;
              }
              .child2{
              background-color: rgba(138, 43, 226, 0.6);
              width:300px;
              height:300px;
              position: absolute;
              top: 0px;
              }
              .parent {
              position: relative;
              height: 2000px;
              }
              </style>






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Nov 21 '18 at 12:28









              Damir DautovicDamir Dautovic

              164




              164













              • does rgba support on all browsers?

                – Jupiter
                Nov 21 '18 at 12:38






              • 1





                Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

                – Damir Dautovic
                Nov 21 '18 at 12:47






              • 1





                Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

                – Damir Dautovic
                Nov 21 '18 at 12:50



















              • does rgba support on all browsers?

                – Jupiter
                Nov 21 '18 at 12:38






              • 1





                Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

                – Damir Dautovic
                Nov 21 '18 at 12:47






              • 1





                Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

                – Damir Dautovic
                Nov 21 '18 at 12:50

















              does rgba support on all browsers?

              – Jupiter
              Nov 21 '18 at 12:38





              does rgba support on all browsers?

              – Jupiter
              Nov 21 '18 at 12:38




              1




              1





              Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

              – Damir Dautovic
              Nov 21 '18 at 12:47





              Yes. but not all versions though... css-tricks.com/rgba-browser-support But you can use opacity as well... with a bit of extra stuff to cover them all css-tricks.com/snippets/css/cross-browser-opacity

              – Damir Dautovic
              Nov 21 '18 at 12:47




              1




              1





              Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

              – Damir Dautovic
              Nov 21 '18 at 12:50





              Also, it is good to have seperate element for the overlay... you'll probably want to play with it on hover states or something similar. And parent will have a proper purpose, in case of containign some additional elements inside of it.

              – Damir Dautovic
              Nov 21 '18 at 12:50











              1

















              .full {
              background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
              min-height: 300px;
              }

              .full {
              background-size: cover;
              position: relative;
              }

              .full:hover .overlay-effect {
              opacity: 1;
              cursor: pointer;
              }

              .overlay-effect {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              opacity: 0;
              transition: .5s ease;
              background-color: rgba(259, 67, 95, 0.7);
              overflow:hidden;
              }

              .full a
              {
              color: #fff;
              }

              .full h3 {
              padding: 15px 30px;
              }

              @media screen and (max-width: 368px) {
              .full{margin-bottom: 10px;}
              }

              <div class="full">

              </div>
              </div








              share|improve this answer




























                1

















                .full {
                background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
                min-height: 300px;
                }

                .full {
                background-size: cover;
                position: relative;
                }

                .full:hover .overlay-effect {
                opacity: 1;
                cursor: pointer;
                }

                .overlay-effect {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                opacity: 0;
                transition: .5s ease;
                background-color: rgba(259, 67, 95, 0.7);
                overflow:hidden;
                }

                .full a
                {
                color: #fff;
                }

                .full h3 {
                padding: 15px 30px;
                }

                @media screen and (max-width: 368px) {
                .full{margin-bottom: 10px;}
                }

                <div class="full">

                </div>
                </div








                share|improve this answer


























                  1












                  1








                  1










                  .full {
                  background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
                  min-height: 300px;
                  }

                  .full {
                  background-size: cover;
                  position: relative;
                  }

                  .full:hover .overlay-effect {
                  opacity: 1;
                  cursor: pointer;
                  }

                  .overlay-effect {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  opacity: 0;
                  transition: .5s ease;
                  background-color: rgba(259, 67, 95, 0.7);
                  overflow:hidden;
                  }

                  .full a
                  {
                  color: #fff;
                  }

                  .full h3 {
                  padding: 15px 30px;
                  }

                  @media screen and (max-width: 368px) {
                  .full{margin-bottom: 10px;}
                  }

                  <div class="full">

                  </div>
                  </div








                  share|improve this answer
















                  .full {
                  background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
                  min-height: 300px;
                  }

                  .full {
                  background-size: cover;
                  position: relative;
                  }

                  .full:hover .overlay-effect {
                  opacity: 1;
                  cursor: pointer;
                  }

                  .overlay-effect {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  opacity: 0;
                  transition: .5s ease;
                  background-color: rgba(259, 67, 95, 0.7);
                  overflow:hidden;
                  }

                  .full a
                  {
                  color: #fff;
                  }

                  .full h3 {
                  padding: 15px 30px;
                  }

                  @media screen and (max-width: 368px) {
                  .full{margin-bottom: 10px;}
                  }

                  <div class="full">

                  </div>
                  </div








                  .full {
                  background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
                  min-height: 300px;
                  }

                  .full {
                  background-size: cover;
                  position: relative;
                  }

                  .full:hover .overlay-effect {
                  opacity: 1;
                  cursor: pointer;
                  }

                  .overlay-effect {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  opacity: 0;
                  transition: .5s ease;
                  background-color: rgba(259, 67, 95, 0.7);
                  overflow:hidden;
                  }

                  .full a
                  {
                  color: #fff;
                  }

                  .full h3 {
                  padding: 15px 30px;
                  }

                  @media screen and (max-width: 368px) {
                  .full{margin-bottom: 10px;}
                  }

                  <div class="full">

                  </div>
                  </div





                  .full {
                  background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
                  min-height: 300px;
                  }

                  .full {
                  background-size: cover;
                  position: relative;
                  }

                  .full:hover .overlay-effect {
                  opacity: 1;
                  cursor: pointer;
                  }

                  .overlay-effect {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  opacity: 0;
                  transition: .5s ease;
                  background-color: rgba(259, 67, 95, 0.7);
                  overflow:hidden;
                  }

                  .full a
                  {
                  color: #fff;
                  }

                  .full h3 {
                  padding: 15px 30px;
                  }

                  @media screen and (max-width: 368px) {
                  .full{margin-bottom: 10px;}
                  }

                  <div class="full">

                  </div>
                  </div






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 21 '18 at 12:35









                  i_thi_th

                  1,066718




                  1,066718























                      1














                      check this code, Change "rgba" color while you want.



                      <div class="semitransparent">
                      <div class="image">
                      </div>
                      </div
                      .semitransparent{
                      width:100%;
                      height:100%;
                      background: rgba(0, 0, 0, 0.5);

                      }

                      .image{
                      background-image:url(https://picsum.photos/300/300/?image=206);
                      width:300px;
                      height:300px;

                      }





                      share|improve this answer
























                      • great worked fine

                        – Jupiter
                        Nov 21 '18 at 12:40
















                      1














                      check this code, Change "rgba" color while you want.



                      <div class="semitransparent">
                      <div class="image">
                      </div>
                      </div
                      .semitransparent{
                      width:100%;
                      height:100%;
                      background: rgba(0, 0, 0, 0.5);

                      }

                      .image{
                      background-image:url(https://picsum.photos/300/300/?image=206);
                      width:300px;
                      height:300px;

                      }





                      share|improve this answer
























                      • great worked fine

                        – Jupiter
                        Nov 21 '18 at 12:40














                      1












                      1








                      1







                      check this code, Change "rgba" color while you want.



                      <div class="semitransparent">
                      <div class="image">
                      </div>
                      </div
                      .semitransparent{
                      width:100%;
                      height:100%;
                      background: rgba(0, 0, 0, 0.5);

                      }

                      .image{
                      background-image:url(https://picsum.photos/300/300/?image=206);
                      width:300px;
                      height:300px;

                      }





                      share|improve this answer













                      check this code, Change "rgba" color while you want.



                      <div class="semitransparent">
                      <div class="image">
                      </div>
                      </div
                      .semitransparent{
                      width:100%;
                      height:100%;
                      background: rgba(0, 0, 0, 0.5);

                      }

                      .image{
                      background-image:url(https://picsum.photos/300/300/?image=206);
                      width:300px;
                      height:300px;

                      }






                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Nov 21 '18 at 12:39









                      Fatemeh Khosravi FarsaniFatemeh Khosravi Farsani

                      339




                      339













                      • great worked fine

                        – Jupiter
                        Nov 21 '18 at 12:40



















                      • great worked fine

                        – Jupiter
                        Nov 21 '18 at 12:40

















                      great worked fine

                      – Jupiter
                      Nov 21 '18 at 12:40





                      great worked fine

                      – Jupiter
                      Nov 21 '18 at 12:40



                      Popular posts from this blog

                      "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

                      Alcedinidae

                      Origin of the phrase “under your belt”?