‹ Home
Exported

Elizabeth Ann Seton - Lake Ridge, VA

Gary Smith, Web Department Director at DiocesanVeronica Alvarado, Project Manager at DiocesanSam LanningKyle Brown, Web Development at DiocesanViolet LaVille, St. Elizabeth Ann Seton StaffFr. Bashista, St. Elizabeth Ann Seton StaffStan?, IT Committee at St. Elizabeth Ann Seton StaffPatrick Suess, IT Committee at St. Elizabeth Ann Seton StaffDonna Engborg, Communications Manager at St. Elizabeth Ann Seton StaffMary Goeldel, DiocesanKyle Sullivan, Web Development at DiocesanSam Pohlman, Web Developer at DiocesanViolet Personal Email, Personal Email at St. Elizabeth Ann Seton StaffViolet LaVille New, New Email at St. Elizabeth Ann Seton StaffJeanne, St. Elizabeth Ann Seton Staff +6 others
From the list: Build

✔ Hover features for inner page buttons

Veronica A. added this on
Completed by Kyle S.
Assigned to
Kyle Sullivan, Web Development at Diocesan Kyle S.
Notes
Boxes should be styled the same way as the Sacraments page
image.png 827 KB • Download

Comments & Events

Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
I fixed this with the following CSS (which should work for all buttons created in the way you did for "Kyle's page").

/* pageContentButtons */
.pageContent .buttons .pageContentButton {
  position: relative;
  cursor: pointer;
  height: 200px;
  margin: 1em 0; }

.pageContent .buttons .pageContentButton img {
  object-fit: cover;
  width: 100%;
  height: 200px;
  position: relative; }

.pageContent .buttons .pageContentButton h3 {
  background: none;
  border: none;
  color: #EFB635;
  font-family: "Lustria", "Newzald", serif;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1; }

.pageContent .buttons .pageContentButton:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #153443;
  opacity: 0.7; }

.pageContent .buttons .pageContentButton:hover img {
  filter: brightness(90%);
  transition: .3s ease-in-out; }

.pageContent .buttons .pageContentButton:hover h3 {
  color: #FFF; }

.pageContent .buttons .pageContentButton:hover:after {
  background: transparent;
  transition: .3s ease-in-out;
  opacity: 0; }
Notified 1 person
Kyle Sullivan, Web Development at Diocesan
Kyle Sullivan completed this to-do.