You don’t need the .overlay div. You could do this by the use of a before and/or after psuedo elements. In combination with a data attribute on the picture (see example here below).

picture {
  position: relative;
}

picture:before {
  content: attr(data-author);
  display: none;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:#000;
  opacity:0.5;
  filter: blur(8px);
}

picture:hover:before,
picture:hover:after {
  display: block;
}

picture:after {
  content: attr(data-author);
  display: none;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

<picture class="profile" data-author="More info">
            <source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
            <source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
            <img src="images/everett.gif" alt="My sunshine who makes me very happy." />
        </picture>

But of course you can wrap it in an extra div and give that a postion absolute (and the top right bottom left) so it will have the same dimensions as parent element.

You can use a combination of filters to blur and darken the image on hover.

For instance:

picture:hover img {
  filter:blur(6px) contrast(40%);
}

The overlay is secondary. A pseudo-element or actual div can be used for this effect.

body {
  text-align: center;
}

picture {
  margin:1em auto;
  display: inline-block;
  position: relative;
  border:2px solid green;
}

picture::after {
  content:"Author Details";
  display: flex;
  justify-content: center;
  align-items:center;
  color:white;
  font-size:2em;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .3s ease;
}

picture:hover::after {
  opacity:1;
}

img {
  transition:all.3s ease;
  display: block;
}

picture:hover img {
  filter:blur(6px) contrast(40%);
}

<picture class="profile">
            <img src="http://www.fillmurray.com/460/300" alt="My sunshine who makes me very happy." />
        </picture>

I’m working on a Portal website for one of my classes and the template my professor provided us with uses the <picture> tag so that they change depending on the size of the browser. I want to blur and darken the image and show text crediting the artist on hover.

You can check the website and how it looks at http://web-students.net/site41/.

Here is my HTML code:

<picture class="profile">
            <source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
            <source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
            <img src="images/everett.gif" alt="My sunshine who makes me very happy." />
        </picture>

And my attempt at the CSS:

picture:hover > .overlay {
        background-color:#000;
        opacity:0.5;
        filter: blur(8px);
        -webkit-filter: blur(8px);

Would it work if I put the <picture> inside a <div> and then applied the CSS to that? Would that still keep the image responsive?