.title-arch { text-align: center; margin: 50px 0; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; } .project { width: 100%; height: 500px; background-size: cover; background-position: center; padding: 0 !important; float:left; } .project-hover p{ font-size: 16px !important } .project-hover { width: 100%; height: 100%; color: #fff; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: rgba(186, 232, 2, 0.7); padding: 40% 30px !important; } .project-hover hr { height: 30px; width: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: rgba(255, 255, 255, 1); border: 0; } .project-hover a { color: rgba(255, 255, 255, 1); padding: 2px 22px; line-height: 40px; border: 2px solid rgba(255, 255, 255, 1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .project-hover a:hover { border-color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1); background-color: #FFF; } .project:hover .project-hover { opacity: 1; } .project:hover .project-hover hr { width: 100%; height: 5px; }