Forrest Gump

1994

85%

 

component
    <!-- resources/views/livewire/movie-poster.blade.php -->

<style>
    .fade-movie-poster {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.35) 45%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.35) 45%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
    }
</style>

<div class="flex relative cursor-default mr-4 overflow-hidden transition duration-500 ease-in-out rounded-lg opacity-75 group-hover:opacity-100">
    <img src="https://image.tmdb.org/t/p/w342/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg" loading="lazy" class="m-auto w-full h-full absolute" alt="">
        <div class="absolute w-full h-full fade-movie-poster p-2">
            <div class="flex h-1/3 justify-between">
                <!-- trailers icon -->
                <svg 
                    class="w-6 h-6 cursor-pointer rounded-md text-gray-200 p-0.5 fade-80 hover:bg-black hover:text-rose-500 transition duration-200 ease-in-out" 
                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                </svg>

                <!-- watch later icon -->
                <svg 
                    class="w-6 h-6 rounded-md text-gray-300 p-0.5 fade-80 cursor-pointer hover:bg-black hover:text-green-500 transition duration-300 ease-in-out"  
                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.5 12.75l6 6 9-13.5"></path>
                </svg>
            </div>

            <div class="h-1/3 w-full flex">
                <!-- play icon -->
                <svg 
                    class="w-13 h-13 cursor-pointer mx-auto text-gray-300 rounded-full fade-40 hover:text-gray-100 transition duration-500 ease-in-out" 
                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>

            <div class="flex h-1/3 p-1.5 items-end">
                <div class="block w-full">
                    <div class="block text-center md:text-lg">
                        <div class="text-lg leading-none tracking-tight text-gray-200 capitalize font-staat xl:text-xl">
                            Forrest Gump
                        </div>
                        
                        <div class="flex justify-center w-full mt-1 text-xs">
                            <div class="flex gap-x-0.5">
                                <div class="px-1 py-0.5 my-auto font-bold text-xs uppercase text-black leading-none bg-gray-400">
                                    cc
                                </div>
                                
                                <div class="px-1 py-0.5 my-auto font-semibold font-mono text-xs uppercase text-gray-300 leading-none bg-black border border-gray-500">
                                    EN
                                </div>
                                
                            </div>
                        </div>
                            
                        <div class="text-sm leading-snug tracking-tight text-gray-400">
                            <div class="flex justify-center">
                                <span>
                                    1994
                                </span>
                                <x-bullet class="px-1" />
                                <span class="text-amber-500">
                                    85%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>