how to show text on the same cell containing an image on the top of it after an onclick event

Question

I have an onclick event on every cell which contains an image.

After clicking on the cell, the image scales up an rotates by some angle specified.

I want the image to fade out and I want the description of the anime which is text to appear on the image. If I click again the same cell the text should fade out and the cell must return back as it was in the first place.

(I will accept it even if it can be done through a button event, but the button should be in the same cell. PLEASE TRY TO SOLVE THIS USING JAVASCRIPT WITHOUT USING ANY LIBRARIES OR FRAMEWORKS IF U CAN.)

<!--BODY OF THE HTML PAGE-->
<body>
<div class="c1" onclick="f(this)">
    <img src="https://picsum.photos/200">
</div>
</body>

<!--CSS AND SCRIPT OF THE HTML PAGE-->


    <style type="text/css">
        .c1
        {
            background-color: blue;
            width: 200px;
            height: 200px;
            position: absolute;
            left:40%;
            top: 30%;
            transform: rotateZ(-45deg);
        }

    </style>
    <script type="text/javascript">
        timesclicked = 0;
        function f(obj) {
            timesclicked+=1;
            if(timesclicked%2!=0)
            {
                obj.style.transform = 'scale(2) rotateZ(-90deg) ';
                obj.style.transition = 'all 1s 0.3s';
            }
            else
            {
                obj.style.transform = 'scale(1) rotateZ(-45deg)';
                obj.style.transition = 'all 1s 0.3s';
            }
        }
    </script>

Manish Khedekar · Accepted Answer · 2019-06-06T11:56:47.147

0

let timesclicked = 0;

function f(containerObj, spinningTime) {
  timesclicked += 1; 
  for(let cell of containerObj.getElementsByTagName('div')){
    if (timesclicked % 2 != 0) {
      cell.style.transform = 'scale(1.2) rotateZ(0deg) ';
      cell.style.transition = 'all 1s ' + spinningTime + 's';

      setTimeout(() => {
        cell.innerHTML = '<div> Data about the image Data about the image Data about the image Data about the image Data about the image Data about the image Data about the image Data about the image Data about the image Data about the image</div>'
      }, spinningTime * 1000);

    } else {
      cell.style.transform = 'scale(1) rotateZ(-315deg)';
      cell.style.transition = 'all 1s ' + spinningTime + 's';

      setTimeout(() => {
        cell.innerHTML = '<img src="https://picsum.photos/200">';
      }, spinningTime * 1000);
    }
  }
}

.c1 {
  background-color: blue;
  width: 150px;
  height: 150px;
  margin: 10px;
  transform: rotateZ(-45deg);
}

.container {
  display: flex;
}

<div class="container" id="container">

  <div class="c1" onclick="f(container,0.3)">
    <img src="https://picsum.photos/200">
  </div>

  <div class="c1" onclick="f(container,0.3)">
    <img src="https://picsum.photos/200">
  </div>

  <div class="c1" onclick="f(container,0.3)">
    <img src="https://picsum.photos/200">
  </div>
</div>

edited Jun 06 '19 at 11:56

answered Jun 06 '19 at 10:20

Manish Khedekar

392
3
13

hey can u also help me to position the cell based on a conditional statement using java script, like.........if the position is this.... then ok else change/translate to a specific postion....something like this – teja venkat Jun 06 '19 at 11:00
consider there are total 3 cells like this making up a bigger diamond shaped cell and three of them do the same thing when clicked. When clicked upon a cell, the scaled cell must come on to a specific position, say to the right of the 3 cells. I know that we can hard code it in the styles but can we specify the position to spawn after clicking only once and apply it to all the cells? – teja venkat Jun 06 '19 at 11:36
this is not exactly what i wanted. consider the same page now,if i click on the first cell the image must expand and it should come on to the right of the 3rd cell and only that cell must be animated accordingly.Now even when i click the 2nd or the 3rd cell the respective cell only should expand and come on to the same position i.e., the right of the third cell.Now we can do this through separately specifying the position in the respective classes but that would be hard coding every time. so is there a way to specify the position only once and apply it to multiple cells. – teja venkat Jun 06 '19 at 12:12
**Explain** ' it should come on to the right of the 3rd cell and only that cell must be animated accordingly.' – Manish Khedekar Jun 06 '19 at 12:19
1

let us number the three cells that u created from left to right. now if cell 1 is clicked, the cell animation happens, like scaling, rotation, text appearing. The animation must end in such a way that the cell just clicked upon moves to the right of the 3rd cell and if clicked again returns to the initial position.Also, if clicked upon a cell only that cell must animate not the others.Is that clear enough? – teja venkat Jun 06 '19 at 12:41
just one last thing can the transition between the text being visible be smoother? is there any way to make the text appear to be like fading in and the picture is fading out? – teja venkat Jun 06 '19 at 17:32
Check out this post, https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load – Manish Khedekar Jun 07 '19 at 05:11

score 0 · Answer 2 · answered Jun 06 '19 at 11:23

0

HTML:

<div class="container c1" onclick="f(this)">   
   <img src="https://picsum.photos/200">  
     <div style="display:none; color:white;" class="centered">Your info</div>
</div>

CSS:

    /* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c1 {
  background-color: blue;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 40%;
  top: 30%;
  transform: rotateZ(-45deg);
}

JS:

  let  timesclicked = 0;

function f(obj) {

  timesclicked += 1;

  if (timesclicked % 2 != 0) {
    obj.style.transform = 'scale(2) rotateZ(-90deg) ';
    obj.style.transition = 'all 1s 0.3s';
        obj.children[1].style.transform = 'scale(2) rotateZ(-270deg) ';
        obj.children[1].style.display = ""; 

  } else {
    obj.style.transform = 'scale(1) rotateZ(-45deg)';
    obj.style.transition = 'all 1s 0.3s'; 
        obj.children[1].style.display = "none";  
  }  
}

answered Jun 06 '19 at 11:23

Aksen P

4,564
3
14
27

https://www.w3schools.com/jsref/prop_element_children.asp Your div with text is hidden by style="display:none;". When you're clicking it at first time this line gose to this div inside the clicked div (class="c1") and after change it style property, accordingly makes this div visible. Simple: you have hidden div inside div. This line need to be used for making it visible and vice versa. – Aksen P Jun 06 '19 at 11:53
i have another sub problem check it on the comments section of the answer posted by Manish Khedekar. help me if u can solve it? – teja venkat Jun 06 '19 at 12:14
1

honestly i can't understand a sub problem. however, the topic question is another, anyone who will come here will try to solve your 1st question. I'm suggesting to you to make a new topic with a new requirementes. Also, it could be that your question was solved before. – Aksen P Jun 06 '19 at 12:38

how to show text on the same cell containing an image on the top of it after an onclick event

2 Answers2