/**
 * ChurchCRM Image Overlay Styles
 * 
 * Custom styles for image overlay effects and positioning.
 * Component-specific - no Bootstrap duplicates.
 */

.image-container {
    position: relative;
}
.image-container .after {
    position: absolute;
    bottom: 0;
    left: 1px;
    width: 100%;
    height: 44px;
    display: block;
    color: #fff;
}
.image-container:hover .after .buttons {
    display: block;
    background: rgba(0, 0, 0, 0.6);
}
.image-container .after .buttons {
    font-size: 1.7em;
    width: 80%;
    max-width: 180px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.image-container .after .buttons a {
    color: #eee;
}
