.shadow-with-mouse-over-effect {
background: #efefef;
box-shadow: 0 0 17px 0 rgba(0,0,0,0.06);
margin-bottom: 30px;
transition: .3s;
}
.shadow-with-mouse-over-effect:hover {
box-shadow: 0 20px 25px rgba(0,0,0,0.15);
transform: translateY(-4px);
}Visto en https://myknowledgeportal.com/2019/01/09/add-mouseover-effect-to-gutenberg-block-in-wordpress/
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>Vist a https://stackoverflow.com/questions/12085881/css-100-width-and-background
label {
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
display:block;
}
label:hover {
background:#eee;
cursor:pointer;
}
input[type=checkbox] + label {
color: black;
}
input[type=checkbox]:checked + label {
background: #efefef;
}
Si queremos que solo afecte a un form determinado añadimos la clase y lo metemos todo de un div
.miEStilo label {
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
display:block;
}
.miEstilo label:hover {
background:#eee;
cursor:pointer;
}<div class= "miEStilo">contenido</div>Link interesante para revisar
https://toolset.com/forums/topic/css-styling-of-checkboxes-in-views-parametric-search/
https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp