try this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>anythings</title>
<pre><pre lang="CSS">
<style>
.div1 {
float: left;
width: 30%;
overflow: hidden;
margin-left: 1.33333%;
margin-bottom: 12px;
border-radius: 10px;
position: relative;
}
.div1 .itembox{
overflow: hidden;
}
.div1 .itembox .item img{
width: 100%;
height: 100%;
}
.div1 .itembox .item .over {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(247,96,14,.8);
color: #fff;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.dis{
display:none;
}
</style>
<button id="btn" class="dis"> Hello </button>
<script >
var btn=document.getElementById('btn');
var ov=document.getElementById('blur');
function fundisplay() {
ov.classList.remove("over");
btn.classList.remove("dis");
}
function funblur() {
ov.classList.add("over");
btn.classList.add("dis");
}
</script>
</body>
</html>