friends I have got a problem to center an image over another image and centering in tailwind css.
<div className="w-1/6 h-11 relative text-center">
<span className="absolute left-0 right-0 w-full h-full">
<Image className="rounded-md" src="https://files.virgool.io/upload/users/785524/posts/sojszup8zfru/72bgkgkumdcq.jpeg" width="50" height="50" alt="video of" />
</span>
<span className="absolute">
<Image src="/svg/play.svg" alt="play video" width="25" height="25" />
</span>
</div>
and my result is :
or if set top and left in play icon
<span className="absolute left-1/2 top-1/2">
<Image src="/svg/play.svg" alt="podcast icon" width="25" height="25" />
</span>
the icon is on the bottom right
you see play icon is top left of the image and I want to be in the middle
thank you for your help
you may try this class object-center to the svg image
ref: https://tailwindcss.com/docs/object-position
or
add these classes to the parent div
flex-row content-center justify-center
you can try this code
<div class="relative">
<img class="object-cover opacity-25" [src]="course.img_src" alt="Card cover image">
<div class="absolute inset-0 flex justify-center items-center z-10">
<mat-icon svgIcon="heroicons_outline:lock-closed" class="icon-size-18"></mat-icon>
</div>
Related
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
I am trying to make the following happen:
On image hover, at the bottom it will show comments/reactions on the left and name on the right
I cannot get the 2 divs to space between at the bottom and I do not know why.
https://play.tailwindcss.com/jyBq62Ok90 is the working code
You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.
See this tailwind play
Hope this helps.
As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs
You can use group-hover utility with a div wrapper. Below code will help you much more
<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>
Using Tailwind With ReactJS I'm trying to align an image to the center but I can't, this is my code:
<div class="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Here is a screenshot of the result:
Make the div parent flex instead of block, add justify-center
like this :
<div class="grid place-content-center gap-1 md:grid-cols-2">
<div class="hidden md:inline-flex my-10 md:ml-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center" />
</div>
<form class="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>
have a look https://play.tailwindcss.com/lQAKX22Qf7
Or you could just add mx-auto to img
Okay so I suppose you just want to align the image to the center of that grid item, in that case you can just simply add justify-self-center class into the div that contain the image, something like this:
<div className="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm justify-self-center">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Also I noticed there's a typo problem at the outer div, it should be className instead of class.
Hope this helps
you need to add m-auto to image. you can see here
<div class="grid place-content-center gap-1 grid-cols-2">
<div class="my-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center m-auto" />
</div>
<form class="my-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>
Changing image on mouse hover :
I have a png image , with text engineerign and another picture with same text but different style.
I need on Hover to change between these 2 images.
I did that few times with normal <img TAG but in next js we need to use their <Image tag insted and this is not possible :
<Image src={engin} alt={'something'} onMouseOver={e => (e.currentTarget.src =
engin_fill)} />
Help is really appriciated
You can create 2 components inside some wrapper and just switch them on hover
<Wrapper onMouseOver={() => setHovered(true)}>
{!hovered&&<Image1/>}
{hovered&&<Image2/>}
</Wrapper>
You should use Tailwind CSS. After that, the code will look like:
<Image src={engin} class="z-20 hover:z-0" />
<div class="z-10">Text</div>
e.g.-
<div class="relative ">
<a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
<h1 class=tracking-wider >Title</h1>
<p class="mx-auto">Description</p>
</a>
<a href="#" class="relative">
<div class="h-48 flex flex-wrap content-center">
<img src="/image_url" class="mx-auto " alt="">
</div>
</a>
More answers:
Tailwind CSS: display text on image hover
How to install tailwind css: https://tailwindcss.com/docs/installation
I need to programm the following design
I want to give the big image in the middle (dark red) the rematining space of my flexcontainer, where the yellow stuff is margin/paddings. The problem i have here is, that my image always overlapps the flex container and also the images in the bottom and the svgs. I dont want to give the image a fixed height nor some percentage values because i want to keep it responsive and dynamicaly. Here is my code:
<div
class="flex flex-col flex-1 fixed bg-black w-auto inset-x-11 inset-y-10 z-1003">
</svg>
<div class="fixed flex flex-1 flex-col inset-x-20 inset-y-20">
<div class="flex h-3/4 justify-center items-center">
<svg
</svg>
<img
class="mx-6 w-5/6 h-full bg-gray-light border-2 rounded-md"
My Big Image
/>
<svg
</svg>
</div>
<div class="flex w-full flex-row flex-1 items-end justify-center mt-6">
<div v-for="img in 3" class="mx-6 bg-black-normal rounded-lg">
<img
the orange images
/>
</div>
</div>
</div>
The best solution here would be for me to remove every heights and only work with flex flex-1 flex-shrink and so on but its not working properly as expected.
You can do this in many ways. Flexboxes are good approach, but for for thumbnails images I would use grid to make them even (but sure flexboxes can by used as well).
It does not matter if you use SVG or not for buttons. But if you have any problem with them - please provide real reproduction example (https://play.tailwindcss.com/ can be usefully).
Demo: https://play.tailwindcss.com/RsXsrdSYG3
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
Or if you want to fill screen height (but empty space will be visible over big image to keep responsive ratio).
Demo: https://play.tailwindcss.com/hTYuGjPHHk
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center flex-1">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6 h-full flex items-center">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>