How to Darken an Image on Mouseover

Darken background image on hover

How about this, using an overlay?

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

Demo

How to darken an image on mouseover?

Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.

CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)

Source for the CSS-based solution:

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

And the image:

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

How to darken an image on mouseover and show buttons?

Here is your solution.

Just move the input buttons outside div.overlay that you're darkening.

You only need to change your HTML so:

<div class="show-image">
    <div class="image">
        <div class="overlay">
        </div>
        <input class="update" type="button" value="Update" />
        <input class="delete" type="button" value="Delete" />
    </div>
</div>

Unlike @philnash's solution, doesn't need z-index, as the input elements are after div.overlay.

how to darken the image on hover in tailwind

You could try putting a div inside and then use the background opacity when hovering it.

Your HTML will be something like this

<div class="h-80 my-4 w-64 rounded-md bg-video bg-cover bg-center shadow-lg cursor-pointer">
  <div class="bg-black bg-opacity-0 p-4 w-full h-full hover:bg-opacity-50 transition-all duration-1000">
    <h1 class="uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500">video</h1>
  </div>
</div>

And the Tailwind config file

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        video: "url('./bg-img.jpg')",      },
    },
  },
  variants: {
    extend: {
      backgroundImage: ['hover'],
    }
  },
}

You can check the demo here: https://play.tailwindcss.com/hfCerQQvHQ

How to darken an round image on mouseover?

Yes you can do this,

You can add the img-round class to the a tag. This way the gradient overlay has the same shape as the image.

Removed dark borders

For some reason the border isn't sharp, I will edit answer once I find a solution.

Darken img while exposing text on hover

CSS Solution

Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/

I have added < span > inside < a > tag with class=darken

<span>text</span>

And updated css is

a.darken{
...;
position:relative;
...
}

new css added is

a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

Make an image go dark and text appear when hovered over

I added a black background to the parent element vividworknav, then I just set the opacity of the image and text on hover and then it seems to work fine.

    .vividworknav {      width: 33.333%;      height: auto;      float: left;      padding: 0;      position: relative;      background-color: black;    }
    .vividworknav:hover img {      opacity: 0.3;    }
    .vividworknav:hover .work-text-content {      opacity: 1;     }
    .vividworknav img {      padding: 0;      width: 100%;      display: block;      opacity: 1;    }
    .vividworknav img,    .work-text-content {      -webkit-transition: opacity 0.5s ease-out;      -moz-transition: opacity 0.5s ease-out;      -o-transition: opacity 0.5s ease-out;      transition: opacity 0.5s ease-out;    }
    .work-text-content {      position: absolute;      color: white;      left: 0;      top: 25%;      right: 0;      bottom: 0;      font-size: 24px;      text-align: center;      opacity: 0;    }

<div class="vividworknav">  <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />  <div class="work-text-content">    <p>VIVID VAPOURS</p>  </div></div>

Darken the image and place a half triangle on hover

You can also use a pseudo element method, but to begin with and not to confuse, I have used an additional element which will be the arrow. Code explanation in comments

To understand how the arrow was created, you need to see this demo first: How CSS triangles work

.image {  width: 250px;  height: 200px;  background: black;  position: relative;  overflow: hidden;}.image img {  transition: all ease 1s;}.image:hover img { /* Darkening effect on mouseover */  background: black;  opacity: 0.7;}.image .arrow { /* Creates a half triangle with top and left arrow transparent */  opacity: 0;  border-color: transparent #f2f2f2 #f2f2f2 transparent;  transition: all ease 1s;  position: relative;}.image:hover .arrow { /* Mouseover effect */  opacity: 1;  font-family: Roboto;  font-size: 36px;  text-align: center;  border-image: none;  border-style: solid;  border-width: 45px;  position: absolute;  bottom: 0;  font-weight: normal;  width: 0;  height: 0;  right: 0;}

.image:hover .arrow {    border-image: none;    border-style: solid;    border-width: 45px;    bottom: 0;    display: block;    font-family: Roboto;    font-size: 36px;    font-weight: normal;    height: 0;    opacity: 1;    position: absolute;    right: 0;    text-align: center;    width: 0;}.image .arrow {    border-color: transparent #f2f2f2 #f2f2f2 transparent;    opacity: 0;    position: relative;    transition: all 1s ease 0s;}
.image .arrow span {    left: 5px;    position: relative;    top: -10px;}

<div class="image">  <img src="http://lorempixel.com/250/200/sports" />  <div class="arrow"><span>></span></div></div>