jQuery add/remove css on mouseover with delay

how can I add a delay on this effect using jQuery?
A fade-in/fade-out of the image’s opacity when mouse over it.
I’m new to coding so feel free to rewrite the code if you think there is a better way to do it.

$(document).ready(function() {

  mouseenter: function() {
    $(this).css("opacity", "0.5")
  mouseleave: function() {
    $(this).css("opacity", "")


Jsfiddle link https://jsfiddle.net/w5d3jdjb/

No jQuery at all:

1 Like

I didn’t remember this css property, thanks a lot!

what about
transition: all 2s 1s