Question

I have an image on which I have some texts. When I hover on the image, I want the image to dim and zoom in. That is working properly, but the problem I have is that the texts on my image get dimmed too as the image dims out. I don't want the text to dim out with the image. How can I achieve that?

Check this Bootply for the code

NOTE : The image is placed as the background of the div that contains my texts

Answer 1

This is happening because you set PROCEDURE Test_script (OUT XYZRow) BEGIN DECLARE Veiw_Name VARCHAR(2147483647); DECLARE Object_Name VARCHAR(2147483647); DECLARE Object_Type VARCHAR(2147483647); DECLARE Domain_Name VARCHAR(2147483647); DECLARE Status VARCHAR(2147483647); DECLARE "READ" VARCHAR(100); DECLARE PUBLIC SetException EXCEPTION; for r as select * from table1 do -- -- The entire LOOP will be trapped by the EXCEPTION -- begin for r2 as SELECT r1.name as Object_Nam, r1.nameType as Object_Typ, r1."domain" as domain_nam, CASE r1.Status AS Status, CASE r1.c_R AS READ_Stat FROM function_xyz(r.PATH) r1 do set Veiw_Name = r.PATH; set Object_Name = r2.Object_Nam; set Object_Type = r2.Object_Typ; set Domain_Name = r2.domain_nam; set Status = r2.Status; set "READ" = r2.Read_Stat; INSERT INTO XYZRow VALUES (Veiw_Name, Object_Name, Object_Type, Domain_Name, Status, "READ"); end for; EXCEPTION WHEN System.SystemException THEN CALL PRINT(CURRENT_EXCEPTION.MESSAGE); END; -- -- If exception occurs, execution will resume here and the first -- loop will continue -- end for; on the parent wrapper, which applies to all children as well.

Instead of adjusting the opacity, I would fade in an overlay using a pseudo element and add opacity: .444; to the text wrapper to keep it above the overlay.

z-index

Then on hover, set the opacity to 1.

.hovereffect .overlay2 {
  /* your styles here */
  z-index: 1;
}

.hovereffect:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

image dim and zoom with text

1 个答案: