.button { display: inline-block; width: 468px; height: 60px; background: #f38438; color: #ffffff; text-align: center; line-height: 60px; text-decoration: none; font-weight: bold; border-radius: 0px; border: solid 2px #f38438; max-width: 100%; height: 60px; } .button:hover { background: #ffffff; color: #f38438; } .button1 { display: inline-block; width: 234px; height: 60px; background: #f38438; color: #ffffff; text-align: center; line-height: 60px; text-decoration: none; font-weight: bold; border: solid 2px #f38438; max-width: 100%; height: auto; } .button1:hover { background: #ffffff; color: #f38438; } .item { max-width: 500px; margin: 0 auto; position: relative; &:hover .item__text { opacity: 1; } &__img { width: 100%; height: 100%; } &__text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; color: #fff; background-color: rgba(0,0,0,0.6); transition: .3s ease-in-out; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; p { line-height: 1.8; } } } .nuevaweb .cuadros-landing-3 .cuadro-servicio:nth-child(1n+0) { margin-left: 0px; } .nuevaweb .cuadros-landing-3 .cuadro-servicio { width: 32%; margin: 0% 2%; height: auto; margin-bottom: 25px; position: relative; } .img__wrap { position: relative; } .nuevaweb a img { border: none; } .nuevaweb img { width: 100%; height: auto !important; max-width: 100%; } .img__description_layer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(87, 110, 173, 0.88); color: #fff; visibility: hidden; opacity: 0; display: flex; padding: 7px !important; } .img__description { display: flex; justify-content: center; align-items: center; padding: 10px !important; color : white !important; }