ul.products {
    display: flex;
    flex-wrap: wrap;
}

    ul.products li {
        text-align: center;
        margin: 0 5px 20px 5px;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
    }

        ul.products li > a, ul.products li > a:hover {
            color: #000 !important;
        }

            ul.products li > a > img {
                width: 100%;
                margin: 0 0 10px 0;
            }

        ul.products li .productRollover {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.7);
            opacity: 0;
            -webkit-transition: all 0.15s ease-in;
            -moz-transition: all 0.15s ease-in;
            -o-transition: all 0.15s ease-in;
            -ms-transition: all 0.15s ease-in;
            transition: all 0.15s ease-in;
        }

            ul.products li .productRollover .detailsTag {
                margin: 40% auto 0 auto;
                padding: 10px;
                border: 3px solid #fff;
                display: inline-block;
                opacity: 0;
                -webkit-transition: all 0.2s ease-in 0.2s;
                -moz-transition: all 0.2s ease-in 0.2s;
                -o-transition: all 0.2s ease-in 0.2s;
                -ms-transition: all 0.2s ease-in 0.2s;
                transition: all 0.2s ease-in 0.2s;
                -webkit-transform: scale(1.25);
                -moz-transform: scale(1.25);
                -o-transform: scale(1.25);
                -ms-transform: scale(1.25);
                transform: scale(1.25);
                color: #fff;
            }

        ul.products li .productName {
            margin: 0 0 10px 0;
        }

@media screen and (min-width: 0px) {
    ul.products li {
        width: calc(50% - 10px);
    }
}

@media screen and (min-width: 768px) {
    ul.products li {
        width: calc(25% - 10px);
    }
}

@media screen and (min-width: 1024px) {
    ul.products li {
        width: calc(20% - 10px);
    }

        ul.products li:hover .productRollover {
            opacity: 1;
        }

            ul.products li:hover .productRollover .detailsTag {
                opacity: 1;
                -webkit-transition-delay: 0.1s;
                -moz-transition-delay: 0.1s;
                -o-transition-delay: 0.1s;
                -ms-transition-delay: 0.1s;
                transition-delay: 0.1s;
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
}

@media screen and (min-width: 1250px) {
    ul.products li {
        width: calc(16.66% - 10px);
    }
}